仿iPhone通讯录制作小程序自定义选择组件的实现(3)

const Static = { list: [], timer: null } Component({ ... data: { scrollIntoView: '', // 标记当前处于哪个字母 subNavHint: false, // 控制借(chao)鉴(xi)微信效果的元素 }, methods: { subTouchStart () { this.setData({ subNavHint: true, scrollIntoView: '' }); }, subTouchEnd () { this.setData({ subNavHint: false }); }, subTouchMove (e) { // 获取字母导航栏元素对应的值 const query = this.createSelectorQuery(); query.select('#subNav').boundingClientRect(); query.selectViewport().scrollOffset(); query.exec(res => { const { clientY } = e.touches[0]; // Y轴的位置 const DomTop = res[0].top; // 导航元素距离顶部的位置 const { list } = this.data; // 计算索引， // 或许看到这里有人会疑问，为什么是除以20？ // 因为样式里面，我写的高度是20px，所以每个字母的区域是20px。 let index = Math.round((clientY - DomTop) / 20); index = index >= list.length ? list.length - 1 : index; // 限制索引大于0 index = index < 0 ? 0 : index; // 限制索引小于0 // 限制结果重复赋值 if (list[index].firstLetter !== this.data.scrollIntoView) { this.setData({ scrollIntoView: list[index].firstLetter }); // 加个抖动效果 wx.vibrateShort(); } }); } }, } ... });

结语

文章写到这呢，基本上核心的功能都已经实现啦～ :stuck_out_tongue_closed_eyes:（终于写完了...）

通过自己封装组件，楼主还是有挺大收获的！

当然，这个组件还有很多可以继续完善的地方，有兴趣的童鞋呢，可以提出你的优化建议，楼主有时(xing)间(qu)的话，会继续完善下去。

最后，还是推一下这个组件啦，希望它能帮到有需要的童鞋。