<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标签,就不重新渲染页面了,求解
兄弟, 你需要给scrollView一个固定的高度,可以用wx.getSystemInfoSync() 动态获取 windowHeight, 这样就可以了, 为了稳妥起见,要给scroll-view 设置高度才能实现。
确实是不会滚动,但是你给scroll-view 一个固定高就会滚动了,我试过了
wechatide://minicode/YUaxkGmE74UD 代码片段
既然可以摘出来,做个代码片段可好?
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
wechatide://minicode/YUaxkGmE74UD 代码片段
我试了,套了层view,还是渲染的啊
点击右边的字母跳转到对应的人,套了view就不渲染了
还真不行,我研究一下。。
非常感谢
都不排版下 看的好乱 @ _ @
wechatide://minicode/YUaxkGmE74UD 代码片段