uniapp自定义样式折叠面板,基于vue的简单折叠面板的实现

标签：sem   tail   template   tom   top   服务   tap   实现   display   

<template>
<view class="houssel">
<view class="padd23">
<view class="housemsg">
<view class="detail bgwhite">
<view class="PingFangSCBold title">待缴费明细</view>
<view class="list pd28" v-for="(item, index) in list" :key="index">
<view class="flex ordertitle" @tap="handleclick(index)">
<view class="PingFangSCBold">2018-03</view>
<view class="PingFangSCBold">0.01</view>
<view class="flex">
<view>明细</view>
<image class="down" mode="widthFix" src="../../static/img/up.png" v-if="item.open==true"></image>
<image class="down" mode="widthFix" src="../../static/img/down.png" v-else></image>
</view>
</view>
<view class="singleline flextwo" v-show="item.open">
<view>高层物业服务费</view>
<view>￥0.01</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
open: true
},
{
open: false
},
{
open: false
}
]
}
},
methods: {
handleclick(index) {
this.list[index].open = !this.list[index].open;
if (this.list[index].open == true) {
for (var i = 0; i < this.list.length; i++) {
if (i == index) {
this.list[i].open = true;
} else {
this.list[i].open = false;
}
}
}
}
}
}
</script>

<style lang="less" scoped>
.padd23{
padding: 20upx 30upx;
}
.housemsg{
border-radius: 16upx;
}
.pd28{
padding: 0upx 28upx;
}
.flex{
display: flex;
align-items: center;
}
.flextwo{
display: flex;
align-items: center;
justify-content: space-between;
}
.pd30{
padding: 0upx 30upx;
}
.housemsg .line{
height: 100upx;
border-bottom: 2upx solid #F2F2F6;
}
.fee{
margin-bottom: 20upx;
border-radius: 16upx;
}
.money{
height: 56upx;
line-height: 56upx;
}
.detail{
margin-top: 20upx;
border-radius: 16upx;
}
.detail .title{
height: 100upx;
line-height: 100upx;
padding: 0upx 28upx;
border-bottom: 2upx solid #F2F2F6;
}
.detail .line{
border-bottom: none;
padding: 0upx 28upx;
}
.down{
width: 22upx;
margin-left:10upx ;
}
.ordertitle{
height: 104upx;
justify-content: space-between;
border-top: 2upx solid #F2F2F6;
border-bottom: 2upx solid #F2F2F6;
}
.ordertitle .flex{
align-items: baseline;
}
.singleline{
height: 70upx;
}
</style>

uniapp自定义样式折叠面板,基于vue的简单折叠面板的实现

标签：sem   tail   template   tom   top   服务   tap   实现   display   

原文地址：https://www.cnblogs.com/shoolnight/p/14774449.html