文字をクリックしても適切な場所にジャンプしない問題: <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":["呀","已"]}]