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

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括柳城網(wǎng)站建設(shè)、柳城網(wǎng)站制作、柳城網(wǎng)頁(yè)制作以及柳城網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，柳城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到柳城省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

第二種在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)且沒(méi)有水印的gif制作軟件，有水印看到就煩。

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

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

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

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

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

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

最后發(fā)現(xiàn)，原來(lái)是在給scroll-view設(shè)置高度的時(shí)候，不能用%來(lái)設(shè)置高度，改成固定高度類(lèi)似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)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

文章名稱(chēng)：微信小程序scroll-view的用法介紹
文章來(lái)源：http://www.rwnh.cn/article46/jgpoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、域名注冊(cè)、用戶體驗(yàn)、定制網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)