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
发表评论