点击字母跳转不到位的问题:在<u-index-list>添加方法@select="clickSelect"
锚点要加id,用对应的字母做为id值,
<u-index-anchor :id="key" :index="key"/>
<template>
<view>
<view class="search">
<u-search v-model="keywords" @custom="search" @search="search" :margin="'0px 0 0 0'"></u-search>
</view>
<view class="wrap ">
<u-index-list class="container" :offsetTop="190" :scrollTop="scrollTop" @select="clickSelect"
:index-list="indexList">
<view class="personal-listitem" v-for="(key, idx) in indexList" :key="idx" :use-slot="true">
<view class="personal-listitem" :use-slot="true" data-top="idx">
<u-index-anchor :id="key" :index="key"/>
<view class="list-cell" v-for="(item, index) in listByLetter[idx]" :key="index"
@click="navTo('')">
<view class="user-images-new">{{ key }}</view>
<view class="user-name"><span>{{ item}}</span>
<span class="user-other">{{ key }}</span>
</view>
</view>
</view>
</view>
</u-index-list>
<u-divider>已经到底了</u-divider>
</view>
</view>
</template>
字母点击事件
clickSelect(e) {
//从当前位置到达目标位置
console.log(">>>当前节点", e, this.scrollTop)
try {
uni
.createSelectorQuery()
.select('#' + e)
.boundingClientRect((data) => {
console.log(">>data", data)
//目标位置的节点:类或者id
uni
.createSelectorQuery()
.select('.container')
.boundingClientRect((res) => {
console.log(data, res)
console.log(">>res.top", res.top)
//最外层盒子的节点:类或者id
this.$nextTick(() => {
uni.pageScrollTo({
scrollTop: data.top - res.top,
// selector: '#' + e,
duration: 100 //app端这个必须设置成0
})
})
})
.exec()
})
.exec()
} catch (e) {
}
},
点击跳转:
出现字母乱跳:indexlist传入的数组字母,没跟真实的左侧的列表匹配上。
:index-list="indexList",如下例子,遍历之后右侧应该不是26个字母,是a,b,d,w,x,y这几个。
let indexList=[
{"letter":"a","data":["啊","爱","按"]},
{"letter":"b","data":["不"]},
{"letter":"d","data":["懂"]},
{"letter":"w","data":["我"]},
{"letter":"x","data":["县","选"]},
{"letter":"y","data":["呀","已"]}]