<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.selected = index;
//this.data.scrollIntoView = index;
console.log(this);
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;
// 判断触摸点是否在字母导航栏上
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; // 单个字母最大高度取值范围
if (y >= _y && y <= __y) {
this.setData({
selected: letters[i],
scrollIntoView: letters[i]
});
break;
}
}
}
}
这是可以的代码,但我在wxml的代码里最外层嵌套了一层view标签,就不重新渲染页面了,求解