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

本文主要是介绍uniapp自定义样式折叠面板,基于vue的简单折叠面板的实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<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的简单折叠面板的实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！