微信小程序scroll-view的用法介紹

發(fā)布時間：2020-06-23 16:36:42 來源：億速云閱讀：682 作者：清晨欄目：web開發(fā)

不懂微信小程序scroll-view的用法介紹？其實(shí)想解決這個問題也不難，下面讓小編帶著大家一起學(xué)習(xí)怎么去解決，希望大家閱讀完這篇文章后大所收獲。

scroll-view：滾動視圖
使用view其實(shí)也能實(shí)現(xiàn)滾動，跟div用法差不多
而scroll-view跟view最大的區(qū)別就在于：scroll-view視圖組件封裝了滾動事件，監(jiān)聽滾動事件什么的直接寫方法就行。

scroll-view縱向滾動添加屬性scroll-y，然后寫一個固定高度就行了，我主要說一下scroll-view的橫向滾動scroll-x：

我使用了display: flex;布局，特么的直接寫在scroll-view上面，顯示出來的結(jié)果總是不對頭，試了好多次，得到了下面兩種寫法；

第二種在scroll-view上添加了enable-flex啟用flex布局屬性，啟用后內(nèi)部就能使用flex布局了，不然你會發(fā)現(xiàn)內(nèi)部布局始終是縱向的。

得到的效果是一樣的，能使用scroll-view事件。

wxml：

<view class="order_item_body">
	<scroll-view scroll-x="true" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}">
		<view class="order_item_list">
			<view class="order_item_goods" wx:for="{{order.detail}}" wx:key="index" id="detail{{index}}">
				<image src="{{item.image}}" mode="widthFix"></image>
				<text>{{item.count+index}}</text>
			</view>
		</view>
	</scroll-view>
</view>

或

<scroll-view scroll-x bindscroll="scroll" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}" enable-flex="{{true}}">
	<view class="order_item_list">
		<view class="order_item_goods" wx:for="{{order.detail}}" wx:key="index" id="detail{{index}}">
			<image src="{{item.image}}" mode="widthFix"></image>
			<text>{{item.count+index}}</text>
		</view>
	</view>
</scroll-view>

wxss：

.order_item_body{
	width: 100%;
	height: 196rpx;
}

.order_item_list{
	/* width: 100%; */
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/* border: 1px solid blue; */
}


.order_item_goods {
	width: 200rpx;
	height: 192rpx;
	position: relative;
}

.order_item_goods>image {
	width: 160rpx;
	height: 160rpx;
	margin: 16rpx 20rpx;
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.order_item_goods>text {
	height: 30rpx;
	line-height: 30rpx;
	padding: 0rpx 5rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255);
	border-top-left-radius: 10rpx;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	bottom: 16rpx;
	right: 20rpx;
}

效果圖：

微信小程序scroll-view的用法介紹

求推薦一款免費(fèi)且沒有水印的gif制作軟件，有水印看到就煩。

ps：下面看下微信小程序scroll-view的scroll-into-view無效如何解決

最近在寫小程序項(xiàng)目遇到這么一個問題：在使用scroll-into-view的時候無效。

在網(wǎng)上查了一遍，給出的答案有：

1.給scroll-view要設(shè)置高度，必須設(shè)置上scroll-y或者scroll-x為true（必須要的）

2.scroll-into-view初始化設(shè)置的時候，可能因?yàn)轫撁婊蛘邤?shù)據(jù)未加載不能跳轉(zhuǎn)。需要在js里手動setData一下。

一頓操作猛如虎，一看還是沒有效果。還是接著找原因吧。。

最后發(fā)現(xiàn)，原來是在給scroll-view設(shè)置高度的時候，不能用%來設(shè)置高度，改成固定高度類似500rpx就可以了

最后貼上代碼：

<view class="left" wx:for="{{cateItems}}" wx:key="{{cateItems}}">
	 <view class='title' bindtap="navItem">{{item.name}}</view>
</block>

<scroll-view class="right" scroll-y="true" scroll-into-view="{{ intoindex }}"  scroll-with-animation>
	<view class="clearfix" wx:for="{{cateItems}}" id="intoindex{{item.id}}"></view>
</scroll-view>

Page({
 	data: {
		intoindex:''
 	},
	navItem(e){
		const that = this
		var id = e.target.id
		that.setData({
			intoindex:'intoindex'+id
		})
	}
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享微信小程序scroll-view的用法介紹內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

微信小程序scroll-view的用法介紹

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽