【uniapp】 scroll-view可滾動視圖

因業務需要，需要做一個類似手機通訊錄的感覺，然後通過旁邊的字母可以快速的定位到相關首字母開頭的聯繫人

 

scroll-view標籤 中的有屬性scroll-into-view，可以快速定位；官方解釋

【值應爲某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素】

其他的屬性講解，請參考官網解釋:https://uniapp.dcloud.io/component/scroll-view

我在寫這個的時候，遇到的問題時 無法進行快速的定位到制定位置，每個參數都是寫對了的，也有scroll-into-view，但還是不可以，後來發現，因爲需要給滾動區域一個固定的高度，才能夠快速定位

style="height:100vh ; " 之前就沒有給固定高度，高度一直定位不起，找了很久問題，才發現只需要給一個固定值 這裏只是一個參考，scroll-view 就能夠快速定位

參考：

<scroll-view :scroll-y="true" class="indexes" :scroll-into-view="'indexes-'+ID" style="height:100vh ; "
 :scroll-with-animation="true" :enable-back-to-top="true">
<block v-for="(item,index) in dataArr" :key="index">
	<view v-if="item.Arr.length>0">
	<view :class="'indexItem-' + item.letter" :id="'indexes-' + item.letter" :data-index="item.letter" >
	<view class="padding tag">{{item.letter}}</view>
	<view class="cu-list menu-avatar no-padding">
	<view class="cu-item" v-for="sub in item.Arr" >
	<view class="cu-avatar round lg headbox">
	<image lazy-load="true" :src="sub.Avatar"></image>
	</view>
	<view class="content">
		<view class="text-grey">{{sub.Name}}</view>
	<view class="text-gray text-sm">
		{{sub.phone}}
		</view>
		</view>						                
         </view>
		</view>
		</view>
	</view>
	</block>
	</scroll-view>

dataArr格式{

"letter":A,

"Arr":[{

"name"：Andy，

“phone”：13300002585

}，]

}

 

關於點擊滑動快速定位的JavaScript方法

/*
			 * 滑動的側邊選擇器
			 */
			getCur(e) {
				this.hidden = false
				this.letter = e.target.id
			},
			setCur(e) {
				this.hidden = true;
				this.letter = e.target.id
			},
			tMove(e) {
				var y = e.touches[0].clientY
				var offsettop = this.boxTop
				//判斷選擇區域,只有在選擇區纔會生效
				if (y > offsettop) {
					var num = Math.floor((y - offsettop) / this.barHeight);
					if (num < this.contacts.length) {
						this.letter = this.contacts[num].letter
						this.scrollViewId = this.letter
					}
				}
			},
			tStart() {
				this.hidden = false
			},
			tEnd() {
				this.hidden = true;
			},

 html

<view class="indexBar-bg">
				<view class="indexBar" catchtouchmove>
					<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove="tMove">
						<view class="indexBar-item" v-for="(item,index) in contacts" :key="index" :id="item.letter" @touchstart="getCur"
						 @touchend="setCur">
							{{item.letter}}
						</view>
					</view>
				</view>
			</view>
			<view v-show="!hidden" class="indexToast">{{letter}}</view>

 

	onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},