uni-collapse折叠面板并不符合需求,需要自己写一个。
效果展示:
代码: (vue3版本)
<template>
<view class="collapse-view">
<view class="collapse-content">
<swiper
:autoplay="false"
:circular="true"
:indicator-dots="false"
:style="{
width: '100%',
height: calcHeight(),
}"
class="collapse-swiper"
@change="changeSwp"
>
内容区域
</swiper>
<view class="mode-change" @click="changeMode">
<!-- 上下展开的小图标-->
<uni-icons
v-if="isCollapse"
type="bottom"
size="18"
color="#165dff"
></uni-icons>
<uni-icons v-else type="top" size="18" color="#165dff"></uni-icons>
</view>
</view>
</view>
</template>
<script setup>
import {ref,reactive} from 'vue'
let isCollapse =ref(true) //是否展开控件
// 计算组件内容区域的高度
const calcHeight = () =>{
//默认高度
let h = "70rpx";
if (!isCollapse.value) {
//展开后高度
h = 190 + "rpx";
}
return h;
}
//切换展开与否
const changeMode =()=>{
isCollapse.value =!isCollapse.value
}
</script>
<style lang="scss" scoped>
.collapse-view {
width: 100%;
height: auto;
background-color: #fff;
margin-top: 20rpx;
swiper {
width: 100%;
height: 60upx;
}
.collapse-content {
padding-bottom: 26rpx;
border-bottom: 1upx solid #f7f7f7;
border-bottom-left-radius: 37upx;
border-bottom-right-radius: 37upx;
}
.collapse-swiper {
min-height: 70upx;
transition: height ease-out 0.3s;
}
.mode-change {
display: flex;
justify-content: center;
margin-top: 10upx;
margin-bottom: 22upx;
:deep(.uni-icons) {
position: absolute;
}
}
}
</style>
vue2版本的 逻辑片段
<script>
export default {
props: {},
computed: {
//结构部分直接写 calcHeight来调用。不要()
calcHeight() {
//默认高度
let h = "70rpx";
if (!this.isCollapse) {
//展开后高度
h = 190 + "rpx";
}
return h;
},
},
data() {
return {
isCollapse: true, //展开与折叠控件
};
},
methods: {
changeMode() {
this.isCollapse = !this.isCollapse;
},
},
};
</script>