uniapp tab选项卡 swiper 高度自适应 使用vue nextTick 解决swiper不能及时获取高度

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)