uview 版本 1.8.4
uniapp 打包成Android
场景
折叠面板的内容是从服务器端获取的分页数据,数据加载回来时需要重新计算collapse-body高度
//优化前代码
//组件
<u-collapse-item @change="handleCollapseChange"></u-collapse-item>
//collapse change事件
handleCollapseChange() {
this.getData()
}
//获取数据请求
getData() {
xxx().then().finally(() => {
this.$nextTick(() => {
this.$refs.collapse.init()
})
})
}
这种方式打开会有明显的卡顿(H5与app上均存在),亲测在老机型上连续触发还会造成程序卡死,体验感非常差
//优化后代码
//组件
<u-collapse-item @change="handleCollapseChange"></u-collapse-item>
//collapse change事件
handleCollapseChange() {
//此处使用debounce方法,延迟执行请求,不影响u-collapse的打开,其次防止快速点击造成多次请求
this.$u.debounce(() => {
this.getData()
},100)
}
//获取数据请求
getData() {
xxx().then().finally(() => {
this.$nextTick(() => {
this.$refs.collapse.init()
})
})
}