微信小程序scroll-view组件:仿通讯录联系人右侧拼音导航

看到电话联系人界面,突然就想到了小程序,想着就准备弄一个,折腾折腾:
本来一开始准备直接传一组数据进去,然后转为拼音,再自动按拼音首字母分组,后来。。。就没有后来了。。。
不过拼音提取插件(网上找的,可是找不到出处了,在此先感谢)已经放在utils文件夹里面了,有兴趣的同学可以鼓捣下,弄了好分享下呢。

现在支持单击字母和滑动导航栏查询联系人;
主要实现方式:

因为想使用scroll-into-view,所以采用了scroll-view,所以会有一个滚动条,若有强迫症的,也可以使用定位来做;
touch是计算触摸点是否落在某个字母相对位置的区间范围内,为真则添加样式并改变scroll-into-view的值

微信小程序scroll-view组件:仿通讯录联系人右侧拼音导航

核心代码示例:

Page({
    data: {
        //当前选择的导航字母
        selected: 0,
        //选择字母视图滚动的位置id
        scrollIntoView: 'A',
        //导航字母
        letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
            'U', 'V', 'W', 'X', 'Y', 'Z'
        ],
        groups: [{
            groupName: 'A',
            users: [{
                name: '阿码',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'B',
            users: [{
                name: '白娘子',
                avatar: '../../images/avatar.png'
            }, {
                name: '包天齐',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'C',
            users: [{
                name: '陈大年',
                avatar: '../../images/avatar.png'
            }, {
                name: '丛云山',
                avatar: '../../images/avatar.png'
            }, {
                name: '崔鸣贵',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'D',
            users: [{
                name: '邓牛牛',
                avatar: '../../images/avatar.png'
            }, {
                name: '刁仁衣',
                avatar: '../../images/avatar.png'
            }, {
                name: '杜长城',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'F',
            users: [{
                name: '范长龙',
                avatar: '../../images/avatar.png'
            }, {
                name: '冯肖晓',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'G',
            users: [{
                name: '甘地',
                avatar: '../../images/avatar.png'
            }, {
                name: '高墙',
                avatar: '../../images/avatar.png'
            }, {
                name: '宫都举',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'H',
            users: [{
                name: '何芸',
                avatar: '../../images/avatar.png'
            }, {
                name: '胡坨坨',
                avatar: '../../images/avatar.png'
            }, {
                name: '黄坨坨',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'T',
            users: [{
                name: '谭老头儿',
                avatar: '../../images/avatar.png'
            }, {
                name: '汤云西',
                avatar: '../../images/avatar.png'
            }, {
                name: '图图',
                avatar: '../../images/avatar.png'
            }]
        }, {
            groupName: 'X',
            users: [{
                name: '夏一天',
                avatar: '../../images/avatar.png'
            }, {
                name: '鲜轰轰',
                avatar: '../../images/avatar.png'
            }, {
                name: '谢大佩',
                avatar: '../../images/avatar.png'
            }]
        }]
    },
    onLoad: function(options) {
        const res = wx.getSystemInfoSync(),
            letters = this.data.letters;
        //设备信息
        this.setData({
            windowHeight: res.windowHeight,
            windowWidth: res.windowWidth,
            pixelRatio: res.pixelRatio
        });
        //第一个字母距离顶部高度,单位使用的是rpx,须除以pixelRatio,才能与touch事件中的数值相加减,css中定义nav高度为94%,所以 *0.94
        const navHeight = this.data.windowHeight * 0.94, //
            eachLetterHeight = navHeight / 26,
            comTop = (this.data.windowHeight - navHeight) / 2,
            temp = [];
        this.setData({
            eachLetterHeight: eachLetterHeight
        });
        //求各字母距离设备左上角所处位置
        for (let i = 0, len = letters.length; i < len; i++) { const x = this.data.windowWidth - (10 + 50) / this.data.pixelRatio, y = comTop + (i * eachLetterHeight); temp.push([x, y]); } this.setData({ lettersPosition: temp }) }, tabLetter(e) { const index = e.currentTarget.dataset.index; this.setData({ selected: index, scrollIntoView: index }) this.cleanAcitvedStatus(); }, //清除字母选中状态 cleanAcitvedStatus() { setTimeout(() => {
            this.setData({
                selected: 0
            })
        }, 500);
    },
    touchmove(e) {
        const x = e.touches[0].clientX,
            y = e.touches[0].clientY,
            lettersPosition = this.data.lettersPosition,
            eachLetterHeight = this.data.eachLetterHeight,
            letters = this.data.letters;
        console.log(y);
        //判断触摸点是否在字母导航栏上
        if (x >= lettersPosition[0][0]) {
            for (let i = 0, len = lettersPosition.length; i < len; i++) { //判断落在哪个字母区域,取出对应字母所在数组的索引,根据索引更新selected及scroll-into-view的值 const _y = lettersPosition[i][1], //单个字母所处高度 __y = _y + eachLetterHeight; //单个字母最大高度取值范围, 50为字母高50rpx if (y >= _y && y <= __y) {
                    this.setData({
                        selected: letters[i],
                        scrollIntoView: letters[i]
                    });
                    break;
                }
            }
        }
    },
    touchend(e) {
        this.cleanAcitvedStatus();
    }
})
尊重原创,转载地址 http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1328&extra=page%3D1%26filter%3Dtypeid%26typeid%3D10

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注