preface

The key to index the address book is to use three trigger events: BindTouchStart, BindTouchEnd and BindTouchMove.

Display effect

The code analysis

Bindtouchstart shows the effect of a letter bar selection

  // Click Start
  getIndex: function (e) {
    console.log('Click Start')
    console.log(e)
    this.setData({
      showSus: true.tempIndex: e.currentTarget.dataset.index
    })
  }
Copy the code

Bindtouchmove’s event return parameter is a way to get the coordinates of the position that we slid to using a simple calculation to say where did we slide to

  / / slide
  toMove: function (e) {
    console.log('Sliding')
    var clientY = e.touches[0].clientY;
    var index = 0;
    if (clientY > 150 && clientY < 490) {     // Within the sliding region
      index = parseInt((clientY - 151) / 13); //13 is the height of each letter block
      if (index >= 0 && index <= 25) {      // Avoid index errors between 0 and 25
        this.setData({
          tempIndex: index
        })
      }
    }
  },
Copy the code

Bindtouchend ends the slide and determines the exception

  / / slide
  toEnd: function () {
    console.log('End of slide')
      this.setData({
        showSus: false
      })
       // No jump occurs when the group of letters at the end of the slide is empty
      if (this.data.contactList[this.data.tempIndex].nameList.length ! =0) {
        console.log(this.data.tempIndex)
          this.setData({
            letterId: this.data.tempIndex,
          })
      }
  },
Copy the code

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>

Copy the code

Code download link ———— download link

conclusion

At this point our address book index is realized.