关于 uview 的indexList跳转不到位的问题:添加方法@select=“clickSelect“

使用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>   

猜你喜欢

转载自blog.csdn.net/weixin_63515766/article/details/128664725