用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    76

    主题

    104

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    优秀版主

    2017-1-11 17:29:36 cyk 管理员 楼主 204249
    本帖最后由 cyk 于 2017-1-11 18:08 编辑

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

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

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



    核心代码示例:
    [AppleScript] 纯文本查看 复制代码
    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();
      }
    })

    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    感谢楼主
    使用道具 举报 回复
    不错很喜欢
    好帖子一定要分享
    厉害啊 谢谢分享
    sdfsdfsdfsdf
    66666
    使用道具 举报 回复
    顶一个6666
    啥也不说了,感谢楼主分享哇!
    123下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略