uniapp中展开与折叠

（一）简单的实现方式

1.如下图所示，uniapp中展开与折叠


2.实现方式，代码如下

<template>
　　<view class="content">
　　　　<view class="containers">
　　　　　　<view class="title">
　　　　　　　　<view class="head-left"></view>
　　　　　　　　<view class="head-right">订单信息</view>
　　　　　　</view>
　　　　<view class="dingdan-msg"  :class="{active:flag}">
　　　　<view class="dingdan-msg-contant">
　　　　　　<view class="dingdan-msg-left">订单号</view>
　　　　　　<view class="dingdan-msg-right">11</view>
　　　　</view>
　　　　<view class="dingdan-msg-contant">
　　　　　　<view class="dingdan-msg-left">商户号</view>
　　　　　　<view class="dingdan-msg-right">1111</view>
　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">清算金额</view>
　　　　　　　　<view class="dingdan-msg-right">11</view>
　　　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">清算时间</view>
　　　　　　　　<view class="dingdan-msg-right">1111111 | 11111</view>
　　　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">异常状态</view>
　　　　　　　　<view class="dingdan-msg-right">12</view>
　　　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">结果</view>
　　　　　　　　<view class="dingdan-msg-right">11</view>
　　　　　　</view>
　　　　</view>
　　　　　　<view class="show-or-noshow" @click = "showTag">{{flag?"收起":"查看全部"}}</view>
　　　　</view>
　　</view>
</template>
<script>
	
	export default {
		data() {
			return {
				flag: false,
			}
		},
		methods: {
		    showTag(){
		        this.flag = !this.flag;
		    }, 
		}
      }
</script>
<style>
/* 初始高度，超出隐藏 */
    .dingdan-msg{
        height: 450rpx;
        overflow: hidden;
        line-height: 70rpx;
        border-bottom: 1px dashed #E8E7E7;
    }
/*  高度自适应，全部显示 */
    .active{
        height: auto;
        overflow: visible;
    }
</style>

3.主要是首先设置一个固定的高度，超过此高度时，就设置隐藏，当点击事件发生时，触发高度自适应，全部显示。

（二）第二种实现方式

利用if()的条件，设置table,和value的方式，获取后端接口数据，设置初始化显示的length,点击展开时，将length的所有长度都显示出来。