使用uview 的indexList做了一个通讯录列表,但是点击总是无法跳到对应的字母,直接上代码,可以试试clickSelect方法
clickSelect(e) {
//从当前位置到达目标位置
console.log(e)
uni
.createSelectorQuery()
.select('#' + e)
.boundingClientRect((data) => {
//目标位置的节点:类或者id
uni
.createSelectorQuery()
.select('.container')
.boundingClientRect((res) => {
//最外层盒子的节点:类或者id
this.$nextTick(function () {
uni.pageScrollTo({
scrollTop: data.top - res.top,
duration: 0 //app端这个必须设置成0
})
})
})
.exec()
})
.exec()
}
补上HTML代码:
<u-index-list :scrollTop="scrollTop" class="container" :index-list="indexList"
active-color="#033073" :sticky="sticky" offset-top="100">
<view v-for="(item,index) in contactsList" :key="item.letter" :id="item.letter">
<u-index-anchor :index="item.letter" />
<view class="list-cell" v-for="(ele,i) in item.userInfo" :key="`${ele.userId} + ${ele.nickName}`">
<view class="list-item" >
<view class="list-item-left" :style="{backgroundColor:ele.color}">
<text class="left-name">{
{ ele.nickName | setNickName }}</text>
</view>
<view class="list-item-center">
<view class="list-name">
<text class="center-name">{
{ ele.nickName }}</text>
<text class="center-mesh basis-mesh" v-if="ele.roles.length != 0 ">{
{ ele.roleName }}</text>
</view>
<view class="list-mesh" v-if="ele.meshName != ''">
<view >
<u-image class="content-text" src="/static/icon/icon_user_mesh.png" width="24rpx" height="24rpx"></u-image>
</view>
<text class="center-mesh mesh">{
{ ele.meshName }}</text>
</view>
</view>
<view class="list-item-right" @click="callPhone(ele.phonenumber)">
<u-image class="content-text" src="/static/icon/icon_contacts_phone.png" width="80rpx" height="81rpx"></u-image>
</view>
</view>
</view>
</view>
</u-index-list>