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

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括柳城網(wǎng)站建設(shè)、柳城網(wǎng)站制作、柳城網(wǎng)頁制作以及柳城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，柳城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到柳城省份的部分城市，未來相信會繼續(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)聽滾動(dòng)事件什么的直接寫方法就行。

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

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

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

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

wxml：

	
		
			
				
				{{item.count+index}}
			
		
	

或

	
		
			
			{{item.count+index}}
		
	

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就可以了

最后貼上代碼：

	 {{item.name}}



	


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

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