监听this.setData完成数据渲染后,获取页面某个元素的高度时好时坏
发布于 6 年前 作者 tao23 974 次浏览 来自 问答
  • 当前 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 回复

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

回到顶部