uniapp使用u-collapse的优化策略

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()
		})
	})
}