快捷導(dǎo)航

微信小程序 scroll-view的使用案例代碼詳解

更新時(shí)間：2020年06月11日 16:39:34 作者：丶Hoo

這篇文章主要介紹了微信小程序 scroll-view的使用案例分析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

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

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

第二種在scroll-view上添加了enable-flex啟用flex布局屬性，啟用后內(nèi)部就能使用flex布局了，不然你會(huì)發(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;
}

效果圖：

特么的水印

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

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

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

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

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

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

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

最后發(fā)現(xiàn)，原來是在給scroll-view設(shè)置高度的時(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 }}" 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
		})
	}
})

總結(jié)

到此這篇關(guān)于微信小程序 scroll-view的使用案例代碼詳解的文章就介紹到這了,更多相關(guān)微信小程序 scroll-view的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: