unipp swiper tab 高度自适应 使用了vue nextTick
实现 swiper切换自适应高度
因为在uniapp 中不支持 vue的router-view
所以选项卡选择了swiper,但是swiper的高度需要预设,不能根据内容的高度撑开,因此使用了uniapp提供的获取节点属性的api来动态设置swiper的高度
setHeight(index = 0) {
console.log('step2')
const that = this;
uni.getSystemInfo({
success: function(res) { // res - 各种参数
console.log('step3')
let element = ".element-" + index
let info = uni.createSelectorQuery().select(element);
info.boundingClientRect(function(data) { //data - 各种参数
that.swiperStyleObj.height = data.height + 'px'
that.$emit('listHeightChange', data.height)
}).exec()
}
});
},
解决swiper嵌套中dom渲染过程获取不到高度的问题
但是在这个过程中遇到了另一个问题,是因为,在swiper中嵌套了swiper,两个swiper都需要动态的设置高度,所以在嵌套的子组件的swiper的高度修改之后,使用$emit,传递给父组件,父组件再重新更新。
在这个过程中遇到一个问题,就是首次渲染的时候,swiper中的数据获取到以后,dom还没有渲染完成,这个时候获取到的dom节点的高度是0。所以使用了vue中提供的nextTick方法, https://cn.vuejs.org/v2/api/#vm-nextTick 这个方法将回调延迟到下次 DOM 更新循环之后执行,因此完美的解决了这个问题,现在操作太快还是会有高度设置不及时的现象发生,还可以继续优化,把获取到的所有的高度进行缓存,避免每次切换时候重复获取
//模拟请求数据
setTimeout(() => {
this.tabs = tabs.tabs
console.log('step1')
this.$nextTick(() => {
this.setHeight()
});
}, 1000)