收藏
回答

this.setDate不渲染问题

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 1.02.1806120

<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 个回答

  • alipay
    alipay
    2018-07-05

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

    2018-07-05
    赞同 2
    回复
  • Devan
    Devan
    2018-07-09

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

    2018-07-09
    赞同
    回复
  • Li
    Li
    2018-07-05

    wechatide://minicode/YUaxkGmE74UD   代码片段

    2018-07-05
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2018-07-05

    既然可以摘出来,做个代码片段可好?

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2018-07-05
    赞同
    回复 13
    • Li
      Li
      2018-07-05

      wechatide://minicode/YUaxkGmE74UD   代码片段

      2018-07-05
      回复
    • 卢霄霄
      卢霄霄
      2018-07-05回复Li

      我试了,套了层view,还是渲染的啊

      2018-07-05
      回复
    • Li
      Li
      2018-07-05回复卢霄霄

      点击右边的字母跳转到对应的人,套了view就不渲染了

      2018-07-05
      回复
    • 卢霄霄
      卢霄霄
      2018-07-05回复Li

      还真不行,我研究一下。。

      2018-07-05
      回复
    • Li
      Li
      2018-07-05回复卢霄霄

      非常感谢

      2018-07-05
      回复
    查看更多(8)
  • 极学者@陈序员
    极学者@陈序员
    2018-07-05

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

    2018-07-05
    赞同
    回复 1
登录 后发表内容