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; }, }