收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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)

     })


最后一次编辑于  03-06  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 卢霄霄
    卢霄霄
    03-06

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

    03-06
    赞同
    回复 16
    • SWS
      SWS
      03-06

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

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

      月经不调。。

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

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

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

      03-06
      回复
    • 🐝🐝🌻🌻🌸🌸
      🐝🐝🌻🌻🌸🌸
      03-11

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

      03-11
      回复
    • 卢霄霄
      卢霄霄
      03-11回复🐝🐝🌻🌻🌸🌸

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

      03-11
      回复
    查看更多(11)