【微信小程序】利用动态计算元素高度，实现点击展开或收起功能_小程序点击箭头收缩

一、前言
项目详情页主要内容需要实现点击展开或收起功能，由于这些内容是后端返回的数据，字数有长右短，那么就要根据文字填充到元素内后的自适应高度去判断是否显示点击展开功能。
如图所示：点击下拉箭头，展示更多内容。再点击就收起。有一个小bug还未解决：就是下拉箭头的角度改变。下拉后应该变为向上箭头的。。
wxml：

<!-- 通过事件响应动态改变数值，进而改变view组件的宽高样式。 -->
      <view class="wap-section {{ isFold ? isOpen ? '' : 'fold' : ''}}" >
        <view class="yaowen-sort" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>
        <van-icon class="down-icon {{isFold ? 'up-icon' :'' }}" name="arrow-up" wx:if="{{isFold}}" bindtap='onChange'/>
      </view>
1
2
3
4
5

wxss:

/* 下拉菜单 */
.wap-section{
  padding: 25rpx;
  font-size: 35rpx;
  color:#555;
  background-color: #f8f8f8;
  overflow:hidden;
  height:420rpx;
  transition: all .3s linear;
}
.fold{
  overflow:hidden;
  height:160rpx;
  transition: all .3s linear;
}

.yaowen-sort{
  text-align: left;
  margin:20rpx 25rpx;
  float:left;
}
.up-icon{
  color:#666;
  background-color: #f8f8f8;
  text-align:center;
  transform: rotate(0deg);
}

.down-icon{
  transform:rotate(180deg);
  position: absolute;
  bottom: 0;right:0;
  z-index:999;
  width:126rpx;
  margin-bottom:37rpx;
  margin-right:26rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

js:

// pages/home/home.js

Page({
  /**
   * 页面的初始数据
   */

  data: {
    // 内容
    list: [
     "新闻","娱乐","体育", "财经","图片", "汽车", "星闻",  "军事","直播", "视频","科技", "手机","数码","本地","网易",  "段子", "时尚", "跟帖", "游戏","教育","课程",  "健康","旅游", "亲子", "艺术","双创", "房产","家居"
    ],
    active: 0,
    // 下拉菜单
    activeNames: ['1'],
    // 声明变量 isOpen 来判断是否展开收起
    isOpen: false,
    // 是否显示'展开' 默认不显示显示 
    isFold: false,
  },

  // 点击展开或收起
  onChange() {
    this.setData({
      isOpen: this.data.isOpen ? false : true
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let _that = this; // 一定要先存this，避免在回调中设置data时报错
    let query = wx.createSelectorQuery();
    query.select('.wap-section').boundingClientRect();
    query.exec(function (rect) {
      if (rect[0] === null) {
        return
      } else if (rect[0].height > 160) { // 自定义一个边界高度
        _that.setData({
          isFold: true
        })
      }
    })
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

json: 这里用到了vant组件

{
  "usingComponents": {
    "van-tab": "vant-weapp/tab/index",
    "van-tabs": "vant-weapp/tabs/index",
    "van-collapse": "/vant-weapp/collapse/index",
    "van-collapse-item": "/vant-weapp/collapse-item/index",
    "van-icon": "/vant-weapp/icon/index"
  }
}
1
2
3
4
5
6
7
8
9