this.setDate不渲染问题
发布于 5 年前 作者 nqiu 18477 次浏览 来自 问答

<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标签,就不重新渲染页面了,求解

5 回复

确实是不会滚动,但是你给scroll-view 一个固定高就会滚动了,我试过了

wechatide://minicode/YUaxkGmE74UD   代码片段

兄弟, 你需要给scrollView一个固定的高度,可以用wx.getSystemInfoSync() 动态获取 windowHeight, 这样就可以了, 为了稳妥起见,要给scroll-view 设置高度才能实现。

都不排版下 看的好乱 @ _ @

回到顶部