WXML：
<view class="flex box box-lr">
<scroll-view class="flex groups box box-tb" scroll-y="true" scroll-into-view="{{scrollIntoView}}">
<block wx:for="{{groups}}" wx:for-item="group" wx:key="">
<view class="flex" id="{{group.groupName}}">
<view class="group-name">{{group.groupName}}</view>
<view class="flex group-users">
<view wx:for="{{group.users}}" wx:key='' wx:for-item="user" wx:for-index="idx" class="user box box-lr">
<view class="user-avatar box box-lr box-pack-center box-align-center">
<image class="user-avatar-img" src="{{user.avatar}}"></image>
</view>
<view class="flex user-name">{{user.name}}</view>
</view>
</view>
</view>
</block>
</scroll-view>
<view class="nav box box-tb" bindtouchmove="touchmove" bindtouchcancel="touchcancel" bindtouchend="touchend">
<view bindtap="tabLetter" data-index="{{item}}" wx:for="{{letters}}" wx:key='' class="flex box box-align-center box-pack-center letter">
<text class="letter-text {{selected == item ? 'letter-actived' : ''}}">{{item}}</text>
</view>
</view>
</view>
<text class="tips" hidden="{{hide}}">{{curView}}</text>
JS:
Page({
data:{
hide: true,
curView: '',
// 当前选择的导航字母
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.jpg'
}
]
},
{
groupName: 'B',
users: [
{
name: '包子',
avatar: '../../images/avatar.jpg'
},
{
name: '狍子',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'C',
users: [
{
name: '陈源',
avatar: '../../images/avatar.jpg'
},
{
name: '陈建安',
avatar: '../../images/avatar.jpg'
},
{
name: '崔安澜',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'D',
users: [
{
name: '邓牛楼',
avatar: '../../images/avatar.jpg'
},
{
name: '刁民',
avatar: '../../images/avatar.jpg'
},
{
name: '杜海涛',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'E',
users: [
{
name: '恶',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'F',
users: [
{
name: '范长来',
avatar: '../../images/avatar.jpg'
},
{
name: '冯晓',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'G',
users: [
{
name: '高删',
avatar: '../../images/avatar.jpg'
},
{
name: '高萨哈',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'H',
users: [
{
name: '何仙姑',
avatar: '../../images/avatar.jpg'
},
]
},
{
groupName: 'I',
users: [
{
name: '哎时间',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'J',
users: [
{
name: '贱人',
avatar: '../../images/avatar.jpg'
}]
},
{
groupName: 'K',
users: [
{
name: '康有为',
avatar: '../../images/avatar.jpg'
}]
},
{
groupName: 'L',
users: [
{
name: '老表',
avatar: '../../images/avatar.jpg'
}]
},
{
groupName: 'M',
users: [
{
name: 'MM',
avatar: '../../images/avatar.jpg'
}]
},
{
groupName: 'N',
users: [
{
name: 'NN',
avatar: '../../images/avatar.jpg'
}]
},
{
groupName: 'O',
users: [
{
name: 'OO',
avatar: '../../images/avatar.jpg'
}]
},
{
groupName: 'T',
users: [
{
name: '谭老头儿',
avatar: '../../images/avatar.jpg'
},
{
name: '汤云西',
avatar: '../../images/avatar.jpg'
},
{
name: '图图',
avatar: '../../images/avatar.jpg'
}
]
},
{
groupName: 'X',
users: [
{
name: '夏一天',
avatar: '../../images/avatar.jpg'
},
{
name: '鲜轰轰',
avatar: '../../images/avatar.jpg'
},
{
name: '谢大佩',
avatar: '../../images/avatar.jpg'
}
]
}
]
},
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;
console.log('字母'+index)
this.setData({
selected: index,
scrollIntoView: index,
curView:index,
hide: false
})
this.cleanAcitvedStatus();
},
// 清除字母选中状态
cleanAcitvedStatus() {
setTimeout(() => {
this.setData({
selected: 0,
hide: true
})
}, 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();
}
})