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.