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-iconsv-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>