uni-app 點擊查看全部，再點擊隱藏部分信息

1、需要的效果如下：

         

 

2、template：

<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" v-for="(item, index) in orderInfoDetaiList" :key="index" :class="{active:flag}">
　　　　<view class="dingdan-msg-contant">
　　　　　　<view class="dingdan-msg-left">訂單號</view>
　　　　　　<view class="dingdan-msg-right">{{item.id}}</view>
　　　　</view>
　　　　<view class="dingdan-msg-contant">
　　　　　　<view class="dingdan-msg-left">商戶號</view>
　　　　　　<view class="dingdan-msg-right">{{item.merId}}{{item.merName}}</view>
　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">清算金額</view>
　　　　　　　　<view class="dingdan-msg-right">{{item.clearingAmount}}</view>
　　　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">清算時間</view>
　　　　　　　　<view class="dingdan-msg-right">{{item.financeTime | timeStamp}}</view>
　　　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">異常狀態</view>
　　　　　　　　<view class="dingdan-msg-right">{{item.exceptionStatus}}</view>
　　　　　　</view>
　　　　　　<view class="dingdan-msg-contant">
　　　　　　　　<view class="dingdan-msg-left">結果</view>
　　　　　　　　<view class="dingdan-msg-right">{{item.status}}</view>
　　　　　　</view>
　　　　</view>
　　　　　　<view class="show-or-noshow" @click = "showTag">{{flag?"收起":"查看全部"}}</view>
　　　　</view>
　　</view>
</template>

3、綁定要顯示的高度樣式：

<script>
	export default {
		data() {
			return {
				flag: false,
			};
		},
      }
</script>

4、是否全部顯示樣式(默認隱藏)：

<style>
　　//初始高度，超出隱藏
    .dingdan-msg{
        height: 450rpx;
        overflow: hidden;
        line-height: 70rpx;
        border-bottom: 1px dashed #E8E7E7;
    }
　　//高度自適應，全部顯示
    .active{
        height: auto;
        overflow: visible;
    }
</style>

5、綁定 顯示/隱藏 的點擊事件：

methods: {
    showTag(){
        this.flag = !this.flag;
    }, 
}