微信小程序高度动态变化实现手风琴效果

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();
  });
  }
})

好用给个赞哦~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容