<view class="flex box box-lr" style='background-color: #eee;'>

<scroll-view class="flex groups box box-tb" scroll-y="true" scroll-into-view="{{scrollIntoView}}">

<block wx:for="{{groups}}" wx:for-item="group">

<view class="flex" id="{{group.groupName}}">

<view class="group-name">{{group.groupName}}</view>

<view class="flex group-users">

<view wx:for="{{group.users}}" wx:for-item="user" wx:for-index="idx" class="user box box-lr">

<view>

<checkbox></checkbox>

</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}}" class="flex box box-align-center box-pack-center letter">

<text class="letter-text {{selected == item ? 'letter-actived' : ''}}">{{item}}</text>

</view>

</view>

</view>

------------------------------js代码

onLoad: function (options) {

const res = wx.getSystemInfoSync(),

letters = this.data.letters;

// 设备信息

this.setData({

windowHeight: res.windowHeight,

windowWidth: res.windowWidth,

pixelRatio: res.pixelRatio

});

// 第一个字母距离顶部高度，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.data.select