微信小程序——通讯录索引实现

前言

实现通讯录索引的关键就是使用好3个触发事件 bindtouchstart、bindtouchend和bindtouchmove。

展示效果

代码分析

bindtouchstart 显示字母栏选中效果

  //点击开始
  getIndex: function (e) {
    console.log('点击开始')
    console.log(e)
    this.setData({
      showSus: true,
      tempIndex: e.currentTarget.dataset.index
    })
  }

bindtouchmove 的事件返回参数中是可以得到所滑动到的位置坐标的
利用简单的计算得到我们的滑动到了哪里

  // 滑动中
  toMove: function (e) {
    console.log('滑动中')
    var clientY = e.touches[0].clientY;
    var index = 0;
    if (clientY > 150 && clientY < 490) {     //在滑动区域内
      index = parseInt((clientY - 151) / 13); //13就是每个字母块儿的高度
      if (index >= 0 && index <= 25) {      //避免出现误差 index在0-25中
        this.setData({
          tempIndex: index
        })
      }
    }
  },

bindtouchend 结束整个滑动动作并作出异常判断

  // 滑动中
  toEnd: function () {
    console.log('滑动结束')
      this.setData({
        showSus: false
      })
       //当滑动结束时的字母分组无人时 不发生跳转
      if (this.data.contactList[this.data.tempIndex].nameList.length != 0) {
        console.log(this.data.tempIndex)
          this.setData({
            letterId: this.data.tempIndex,
          })
      }
  },

wxml

<scroll-view scroll-y class="height100" style="margin-top:{{CustomBar}}px" scroll-with-animation="true" enable-back-to-top="true" scroll-into-view='sw{{letterId}}' >
	<view class="index-title" id="sw{{index}}" hidden="{{!(item.nameList.length!=0)}}" wx:for="{{contactList}}" wx:for-item="item">
		<view class="tip">{{item.tip}}</view>
		<view  wx:for="{{item.nameList}}" class="name-item flxr aic" wx:for-item="col">
			<view class="head">{{item.tip}}</view>
			<view class="name ml20">{{col.name}}</view>
		</view>
	</view>

</scroll-view>
<view class="index-list flxc" bindtouchend="toEnd" bindtouchmove="toMove">
	<view class="index-list-item {{}}" wx:for="{{letterList}}" bindtouchstart="getIndex"  data-index="{{index}}">{{item}}</view>
	<view wx:if="{{showSus}}" class="xuanfu">{{letterList[tempIndex]}}</view>
</view>

代码下载链接————下载链接

总结

至此我们的通讯录索引就实现了。