Vue BetterScroll重新计算高度

文章描述:

Vue BetterScroll使用中内容区域如果有图片的时候没有加载完成,高度显示会有问题,这种情况下要怎么处理?

获取数据

methods: {
	async getData(){
		var id = this.$route.query.id
				
		let res = await http.$axios({
			url:'/api/goods/detail',
			params:{
				id:id,
			}
		}).then(res=>{
			let item = res[0]
			
			// console.log(item)
			this.detail = item
		})
	},
},

 

内容显示

<div class="fixck"  v-html="detail.content"></div>

 

betterScroll插件

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

mounted() {
    this.$nextTick(()=>{
	this.BetterScroll = new BetterScroll(this.$refs.wrapper, {
		probeType: 3,
		bounce: false,
		click:true
	})
			
	this.BetterScroll.on('scroll',(pos)=>{
		//重新计算高度
				
		this.BetterScroll.refresh()
	})
    })
},

 

发布时间:2022/07/28

发表评论