微信小程序——通讯录

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();

}

})