情况一:单个折叠面板
下面是模板
<u-collapse :class="[openFlag ? 'open-flag' : '']" ref="collapse" accordion :border="false" @close="closeCollapse" @open="openCollapse">
<u-collapse-item ref="collapseItem" title="标题" name="optional">
<!-- 你的折叠内容 -->
</u-collapse-item>
</u-collapse>
下面是js代码
export default {
data() {
return {
openFlag: true, // 默认展开
};
},
methods: {
// 关闭折叠面板的时候,把标志位改为false == 这样才能够高度为0
closeCollapse() {
this.openFlag = false;
},
// 打开折叠面板的时候,把标志位改为true == 这样高度为auto
openCollapse() {
this.openFlag = true;
}
}
}
下面是样式
<style lang="scss" scoped>
// 让 有 open-flag 这个类名的 折叠面板 高度自动撑开
.open-flag /deep/.u-collapse-item__content {
height: auto !important;
}
</style>
以上是单个折叠面板的情况,只需要一个标志位openFlag去控制高度是否为自动的即可
情况二:多个折叠面板
下面是模板
<u-collapse :value="showValueList" @close="close" @open="open">
<!-- showOpenFlagList[index] 这里的 index 就是代表第几个展开 -->
<u-collapse-item :class="[showOpenFlagList[index] ? 'open-flag' : '']" v-for="(item, index) in dataList"
:title="item.name" :name="index">
<view class="content-wrap" v-for="data in item.itemData" :key="data.id">
<view class="title">{{data.name}}</view>
</view>
</u-collapse-item>
</u-collapse>
下面是js代码
export default {
data() {
return {
dataList: [], // 数据: [ {itemData: [{ id: '', name: '', ... }, {}, {}, ...], name: '标题1'}, {itemData: [], name: '标题2'}, ... ]
showValueList: [], // 同 u-collapse-item 的 name 数组, 本文例子 的格式是 [0, 1, 2, ..]
showOpenFlagList: [], // 多少个 u-collapse-item 长度就是多少
};
},
methods: {
async getData() {
const params = {
keyPlaceName: this.keyword,
// order: this.order,
// ...pagination
};
const res = await smKeyPlaceList(params);
if (res.success && Array.isArray(res.result)) {
this.dataList = res.result;
// 遍历结果数组
this.showValueList = res.result.map((elem, index) => {
// 这就意味着 标志位 有多少 -- 这里是默认全为true,即表示全部展开
this.showOpenFlagList.push(true)
// u-collapse-item 的 name 就是 index
return index
});
}
},
close(value) {
// 这里的value就是你点击收起来的折叠面板的name,因为name我设置为index,所以可以直接用value来找到下标对应的标志位
this.showOpenFlagList[value] = false;
// 这是防止 直接修改的时候 数据修改了 模板没反应过来
this.showOpenFlagList = [...this.showOpenFlagList]
},
open(value) {
this.showOpenFlagList[value] = true;
this.showOpenFlagList = [...this.showOpenFlagList]
}
}
}
下面是样式
<style lang="scss" scoped>
// 让 有 open-flag 这个类名的 折叠面板 高度自动撑开
.open-flag /deep/.u-collapse-item__content {
height: auto !important;
}
</style>
结论:上述两种方法有一点弊端,就是height为auto的时候,过渡动画是感受不到的,所以当从关闭到展开的过程,这个过程就没有过度动画了