在我们制作移动端折叠面板的时候,可以按照ref的方式获取高度来调节,但是我们在写小程序的时候,要按照小程序的api来获取修改高度,以下为完整的折叠面板代码,可以实现自动识别高度,是否折叠
v-for里面写
javascript">class="changeBox" :style="{'height':flag[index] ? heightArr[index] < staticHeight ? heightArr[index] + 'px' : staticHeight + 'px': heightArr[index] +'px'}"
两个折叠按钮
<view
class="bottom-arw"
@click="showContent(index)"
v-if="flag[index] && heightArr[index] > staticHeight"
>展开﹀</view>
<view
class="bottom-arw"
@click="showContent(index)"
v-if="!flag[index] && heightArr[index] > staticHeight"
>收起︿</view>
data数据
javascript">data() {
return {
flag: [],
staticHeight: 140,
heightArr: [],
}
},
js部分
javascript">onLoad(query) {
this.getData()
},
//方法
methods: {
getData() {
// 自己请求数据来循环列表
this.setHeight()
},
showContent(index) {
var f = (this.flag[index] = !this.flag[index])
this.$set(this.flag, index, f)
},
setHeight() {
this.$nextTick(() => {
// 页面渲染完成后的回调
const query = uni.createSelectorQuery().in(this)
let nodesRef = query.selectAll(".changeBox")
nodesRef
.boundingClientRect(rek => {
if (!rek || !rek.length) {
this.isEmpty = true
return
}
rek.map((item, index) => {
this.heightArr.push(item.height)
this.$set(this.flag, index, true)
})
})
.exec()
})
}
}
大家可以按照自己的喜好自行修改