用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

3

主题

36

帖子

885

积分

诠释者

Rank: 4

积分
885
QQ
2016-12-8 17:06:06 treadpit原创达人 优秀会员纪念 开发者认证 诠释者 楼主 5428793
看到电话联系人界面,突然就想到了小程序,想着就准备弄一个,折腾折腾
  • 本来一开始准备直接传一组数据进去,然后转为拼音,再自动按拼音首字母分组,后来。。。就没有后来了。。。
  • 不过拼音提取插件(网上找的,可是找不到出处了,在此先感谢)已经放在utils文件夹里面了,有兴趣的同学可以鼓捣下,弄了好分享下呢。

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

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

letter1.gif


核心代码示例:
[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();
  }
})


项目地址及下载:
github地址:https://github.com/treadpit/wx_pinyin,欢迎各位看官提PR或者issue,start哟
wx_pinyin-master.zip (115.3 KB, 下载次数: 402)

评分

参与人数 2原创 +1 浮云 +44 收起 理由
天下雪 + 1 + 20 很给力!
amis + 24 很给力!

查看全部评分

程序小当家 发表于 2016-12-13 10:44
好像只能一个字母一个字母点击,不能像手机联系人那样,滑动,可以优化

可以滑动的呢
楼主高产啊,关键是都是实用组件;我先下来体验一番
天下雪 发表于 2016-12-8 17:10
楼主高产啊,关键是都是实用组件;我先下来体验一番

额,没时间优化等各位大神弄一下呢,产品喊我去改bug了
刚好最近在做的小程序里面需要用到这个,谢谢楼主分享
把姓名的首字母取出并进行分类,用的什么插件?是在后台处理的吗。还有希望增加模糊检索功能。
首先表示支持,这种好东西越多以后做项目越轻松。
其次如果有的字母联系人缺失的话,那个字母还会出现么?果然还是楼主最初的想法比较棒啊,自动按数据首字母生成列表。就看楼主有没有空了,期待!!!
2016-12-8 19:01:30 赤龙优秀会员纪念 管理员
9#
这个组件真的非常有用,谢谢分享
可以,这很大腿~    感谢楼主分享
正想做呢,太棒了

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 升级积分

查看全部评分

罗小黑 发表于 2016-12-8 19:46
正想做呢,太棒了

有问题可以提在这里,作者会看的
真的很棒哦
学习下载
学习学习
1234下一页
发新帖
    您需要登录后才可以回帖 登录 | 立即注册