在使用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()
},
