微信小程序高度动态变化

wxml

 <view bindtap="tapClick" >显示/隐藏</view>
<view class="collapse-wrap" style="height: {{contentHeight}};">
  <view class="collapse-item-content">
    <block wx:for="{{10}}">
      <view>wwww</view>
    </block>
  </view>
</view>

wxss

.collapse-wrap{
  background-color: paleturquoise;
  height: 0;
  overflow: hidden;
  transition: height .3s ease-in-out;
}

js

Page({
  data: {
    contentHeight: 0,
  },
  tapClick(){
    this.updateStyle(this.data.contentHeight)
  },
  updateStyle(expanded) {
    this.getRect('.collapse-item-content')
        .then((rect) => rect.height)
        .then((height) => {
          if (expanded) {
            this.setData({ contentHeight: 0 });
          }else{
            this.setData({ contentHeight: `${height}px` })
          }
      });
  },
  getRect(selector, all) {
    return new Promise(resolve => {
      wx.createSelectorQuery()
          .in(this)[all ? 'selectAll' : 'select'](selector)
          .boundingClientRect(rect => {
          if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
          }
          if (!all && rect) {
              resolve(rect);
          }
      })
      .exec();
  });
  }
})

作者：踏雪_739a
链接：https://www.jianshu.com/p/4eac2ff2b9fa
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。