scroll-view：滾動檢視
使用view其實也能實現滾動，跟div用法差不多
而scroll-view跟view最大的區別就在於：scroll-view檢視元件封裝了滾動事件，監聽滾動事件什麼的直接寫方法就行。

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

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

第二種在scroll-view上添加了enable-flex啟用flex佈局屬性，啟用後內部就能使用flex佈局了，不然你會發現內部佈局始終是縱向的。

得到的效果是一樣的，能使用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.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.5);
	position: absolute;
	bottom: 16rpx;
	right: 20rpx;
}

效果圖：

求推薦一款免費且沒有水印的gif製作軟體，有水印看到就煩。

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

最近在寫小程式專案遇到這麼一個問題：在使用scroll-into-view的時候無效。

在網上查了一遍，給出的答案有：

1.給scroll-view要設定高度，必須設定上scroll-y或者scroll-x為true（必須要的）

2.scroll-into-view初始化設定的時候，可能因為頁面或者資料未載入不能跳轉。需要在js裡手動setData一下。

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

最後發現，原來是在給scroll-view設定高度的時候，不能用%來設定高度，改成固定高度類似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 }}" style="height: 1100rpx;" 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
		})
	}
})

總結

到此這篇關於微信小程式 scroll-view的使用案例程式碼詳解的文章就介紹到這了,更多相關微信小程式 scroll-view的使用 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！