[游戏开发]uView indexList索引列表遇到的坑

在使用uView索引列表做通讯录的时候遇到了几个问题

右侧的abcd首字母按钮点击错乱 比如点了f 弹出显示的是a

• 通过排查 发现传入这个右侧组件参数的时候 后端并没有返回完整的A-Z 而是有A首字母的数据 才返回了A 没有F首字母的 就没有返回F 导致A-Z不完整 所以传进入后显示就出问题了 所以不管数据有没有都要想办法把A-Z匹配完整才行

点击右侧的按钮 不会锚点跳转 比如点击Z 要跳转到Z的首字母那里去

• 后来发现uView只提供了点击右侧按钮的回调方法 (可以拿到点击的字母) 并不自带跳转 于是我们首先给每一个列表添加上一个id id就是当前的字母 然后通过dom拿到这个元素距离顶部的距离 然后拿到最外层的元素顶部的距离 去滚动即可

 clickSelect(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()
      },

• 如果uni.pageScrollTo滚动不了 就去看这篇文章