(一)简单的实现方式
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的所有长度都显示出来。