收藏
回答

监听this.setData完成数据渲染后,获取页面某个元素的高度时好时坏

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug setData回调 客户端 6.5.3 2.6.0

- 当前 Bug 的表现(可附上截图)

        需求是文字多时展开收起的功能。

        请求接口拿到文字数据后监听this.setData完成数据渲染后,在setData回调中获取包裹文字dom的高度,然后实现展开收起的功能,可是这个高度有时可以获得,有时获取不到,想问下setData的回调是不是不能保证data的数据已经在界面渲染成功后才执行?毕竟setData是异步的,我在setData的回调中加个异步setTimeout,时间为0ms,有时可以有时不可以,时间为50ms,就可以保证能拿到渲染数据后的dom高度了

- 预期表现


- 复现路径


- 提供一个最简复现 Demo

html:

<view class='{{showTotal ? "des" : "des-short"}}' style='-webkit-line-clamp: {{lineNum}};'>

           <text>{{content}}</text>

       </view>

       <view bindtap="toggle" class="desc-status-box"  wx:if="{{showTotalBtn}}">

           <text class="desc-status">{{isShow ? '收起' : '展开'}}</text>

           <image class="pic-status" src="{{isShow?'../../resources/images/up_arrow.png':'../../resources/images/down_arrow.png'}}" />

       </view>

js:

getCategoryInfo({categoryId:this.data.categoryId}).then(res =>{

     this.setData({

       content:res.data.content

     },() => {

       console.log()

       // setTimeout(()=>{

         let query1 = wx.createSelectorQuery()

         query1.select(".des-short").boundingClientRect(data => {

           //获取屏幕宽度

           let height = data.height * 750 / this.data.screenWidth

           console.log(height)

           

           this.setData({

             lineNum: 3,

             showTotalBtn: height > 186 ? true : false

           })

           

         }).exec()

       // },50)

     })


回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2019-03-06

    有没有设置transition之类的样式呢。。

    2019-03-06
    有用
    回复 16
    • SWS
      SWS
      2019-03-06

      没有,就是简单功能,没其它复杂的

      2019-03-06
      回复
    • 卢霄霄
      卢霄霄
      2019-03-06回复SWS

      月经不调。。

      就冲这标题,做个代码片段你给我,我帮你看看

      2019-03-06
      回复
    • SWS
      SWS
      2019-03-06回复SWS

      在想是不是页面没有渲染成功,就执行了setData的成功回调

      2019-03-06
      回复
    • ʚ🧸ྀིɞ
      ʚ🧸ྀིɞ
      2019-03-11

      我想获取循环列表各个文字的高度,不知道那位大神可以回复我

      2019-03-11
      回复
    • 卢霄霄
      卢霄霄
      2019-03-11回复ʚ🧸ྀིɞ

      截图说明下呢。。不知道你页面啥样子

      2019-03-11
      回复
    查看更多(11)
登录 后发表内容