基于vue的简单折叠面板的实现 uniapp自定义样式折叠面板-蒲公英云

好叭今天写折叠面板功能~~~ 最近在写uniapp 设计图里面有一个折叠面板功能

但是查看了基于uniapp的组件及u-view的折叠面板都无法自定义其标题内容所以只能自己写一个咯

用vue写还是很快的起码我同事五分钟就给我写完了在这里插入图片描述话不多说上代码

在这里插入图片描述

css部分

这里有个地方一定要注意就是列表里面一定要有一个开关，用来控制开关的我这里叫open
假数据放在这里叫做list 折叠面板的样式可以自己调呀有什么不喜欢的就改动吧

<template>
    <view class="Suborder">
        <view v-for="(item, index) in list" :key="index" class="collaose">
            <view @tap="handleclick(index)" class="section louis-space-between ">
                <view class="box">
                    <view class="top louis-space-between ">
                        <view style="color:#333333 ;">143352546478896523</view>
                        <view style="color:#FB5F10;">￥1.26</view>
                    </view>
                    <view class="bottom louis-space-between ">
                        <text style="color:#666666 ;">大鲨鱼-2020-07-20 15:23:02</text>
                        <text>未结算</text>
                    </view>
                </view>
                <view class="louis-inline-block incon"><u-icon name="arrow-down" size="28"></u-icon></view>
            </view>
            <view v-show="item.open" class="louis-15px">
                <view class="alllist louis-bgfff">
                    <view class="list louis-bgfff">
                        <view class="louis-flex louis-lpadding">
                            <view class="imgbox louis-smpadding">
                                <image
                                    style="width: 140rpx;height: 154rpx;"
                                    src="http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200717/20200717/0.69995000 1594955210e5218cde16760c7b6011097d27e9ccf2.jpg"
                                    mode=""
                                ></image>
                            </view>
                            <view style="margin-left: 10rpx;" class="righttext">
                                <view style="width: 500rpx;margin-top: 10rpx;" class="u-font-30 louis-space-between">
                                    <text style="color: #333333;">一片式休闲彩虹拖鞋</text>
                                    <text style="color: #FB5F10">￥1.26</text>
                                </view>
                                <view class="u-font-30" style="margin-top: 10rpx; color: #666666;">实付：￥96.80</view>
                                <view class="number" style="color:#999999 ;">数量：1</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default { 
    data() { 
        return { 
            pagesize: 6,
            list: null,
            keyword: '',
            current: 0,
            list: [
                { 
                    head: '赏识在于角度的转换',
                    body: '只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来',
                    open: true
                },
                { 
                    head: '生活中不是缺少美，而是缺少发现美的眼睛',
                    body: '学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美',
                    open: false
                },
                { 
                    head: '周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧',
                    body: '但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美',
                    open: false
                }
            ]
        };
    },
    onPullDownRefresh() { 
        uni.stopPullDownRefresh();
    },
    onReachBottom(e) { 
        console.log('触底加载更多');
    },
    mounted() { },
    methods: { 
        change(index) { 
            this.current = index;
        },
        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 scoped lang="less">
.item { 
    display: inline-block;
    border: 1px solid #c0c0c0;
    font-size: 27rpx;
    padding: 5rpx 10rpx;
    border-radius: 10rpx 0rpx 0rpx 10rpx;
    // border-right: 0px;
    &:nth-child(2) { 
        border-left: 0px;
        border-radius: 0rpx 10rpx 10rpx 0rpx;
    }
}
#itemindxs { 
    color: #ffffff;
    background-color: #000000;
    border: 1px solid #000000;
}
.serch { 
    padding: 10rpx;
    background-color: #f2f2f2;
}
.topbabs { 
    // margin-top: 15rpx;
    background-color: #f6f6f6;
    padding: 10rpx 0rpx;
}
.noaddress { 
    margin-top: 300rpx;
    #img { 
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 50rpx;
    }
    .buttonblue { 
        margin-top: 50rpx;
        background-color: #5292f3;
        padding: 20rpx 50rpx;
        color: #ffffff;
        display: inline-block;
        border-radius: 50rpx;
    }
}
.cscs { 
    width: 350rpx;
    overflow: hidden;
    overflow-wrap: break-word;
    font-size: 30rpx;
}
.number { 
    height: 37rpx;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 37rpx;
    color: rgba(153, 153, 153, 1);
    margin-top: 10rpx;
}
</style>
<style lang="less" scoped>
page { 
    background-color: #f6f6f6;
}
.section { 
    // height:145rpx ;
    background-color: #fff;
    border-top: 1px solid rgba(226, 226, 226, 1);
    .box { 
        padding: 30rpx;
        flex: 80%;
    }
    .incon { 
        margin-top: 5%;
        margin-right: 20rpx;
    }
    .top { 
        margin: 10rpx;
        margin-left: 0;
    }
}
.alllist { 
    border-top: 1px solid rgba(226, 226, 226, 1);
}
.isColor { 
    color: #fea91a;
}
.isGreen { 
    color: #29ab91;
}
</style>