内容不限高，点击切换收起内容和展开内容（动态获取高度）

一、要实现的效果

二、实现思路

        我们通过动态获取容器的高度，保存这个值。 默认是展开状态，也就是我们一开始就获取内容容器的高度，通过动态绑定高度。点击收起的时候，我们就把这个高度改为0，或者默认最小的高度。然后加上过渡属性。点击展开的时候，就把那个动态绑定的高度赋值为保存的值。

三、上代码说话吧

    <!-- 内容区域 -->
    <view class="content">
      <view class="content-item" v-show="current == 0" :style="{height:scH +'px',overflow:isoverflow}">
        <punchTreeItem :itemobj="item" :isindex=true :ispunch=fasle v-for="(item,index) in timeList" :key="item.id"></punchTreeItem>
      </view>
      <!-- 收起 -->
      <view class="collapse" @click="close" v-if="isshow == true" :style="{display: nodrop}">
        <view class="collapse-img">
          <image src="../../static/image/index_pages/drop.png" mode="" v-show="isshow == true"></image>
        </view>
        <view class="collapse-text">
          收起
        </view>
      </view>
      <!-- 展开-->
      <view class="collapse" @click="open" v-if="isshow == false">
        <view class="collapse-img">
          <image src="../../static/image/index_pages/drop.png" mode="" style="transform: rotate(180deg);"></image>
        </view>
        <view class="collapse-text">
          展开
        </view>
      </view>
      <!-- <view class="content-item" v-show="current == 1">
        1
      </view> -->
    </view>

data里面定义： 

current: 0,
        allheight: 33,
        scH: '',
        isshow: true,
        isoverflow: 'display',

 方法：

close() {
        this.scH = 0
        this.isshow = false
        this.isoverflow = 'hidden'
      },
      // 展开
      open() {
        this.scH = this.allheight
        this.isshow = true
        this.isoverflow = 'display'
      },

获取高度：

getHeight() {
        let _this = this;
        uni.getSystemInfo({
          success: function(res) { // res - 各种参数
            console.log(res);
            let item = uni.createSelectorQuery().in(_this).select(".content-item");
            item.boundingClientRect(function(data) {
              _this.allheight = data.height
              console.log("---", data.height)
            }).exec()
          }
        });
      }

 组件挂载的时候获取高度：

mounted() {
      this.getHeight()
    },

四、解释

这个scH就是动态绑定的高度，超出的部分我们隐藏，不然收起的时候会有问题，我这里是封装成组件，有些不需要收起，方便我复用才动态绑定的，可以直接再style里面写overflow:hidden就行。

这是用来定义容器的高度，我们一开始挂载组件，获取到的容器高度也是赋值给这个存放着。 

展开的时候就将这个总的高度赋值给动态的高度。

收起的时候就把动态高度弄为0。

加上过渡：

主要是这个获取高度的方法：

注意的是：这个获取高度的，用在v-for循环出来的容器是无效的！

其它的应该没有什么好说的啦。