wxml {{group.groupName}} {{user.name}}

{{item}} js 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(); } }) css page { background-color: #eee; } .nav { position: fixed; right: 10rpx; top: 3%; height: 94%; width: 50rpx; font-family: Arial, Helvetica, sans-serif } .letter { width: 50rpx; height: 50rpx; font-size: 30rpx; } .letter-text { display: inline-block; width: 100%; height: 100%; text-align: center; line-height: 50rpx; border-radius: 50%; } .letter-actived { background-color: #ccc; } .groups { /height: 100%;

/ } .group-name { padding: 10rpx 30rpx; height: 50rpx; line-height: 50rpx; } .group-users { background-color: #fff; } .user { height: 100rpx; line-height: 100rpx; padding: 0 30rpx; border-bottom: 1px solid #eee; } .user-avatar { border-right: 1px solid #eee; width: 100rpx; } .user-avatar-img { width: 70rpx; height: 70rpx; border-radius: 50%; } .user-name { padding-left: 30rpx; }