因业务需要,需要做一个类似手机通讯录的感觉,然后通过旁边的字母可以快速的定位到相关首字母开头的联系人
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()
},