vue移动端首页下拉空白

最新推荐文章于 2023-11-30 11:18:48 发布

饱饱~~

最新推荐文章于 2023-11-30 11:18:48 发布

阅读量437

点赞数

分类专栏： vant 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_58893670/article/details/125524711

版权

vant 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

使用的是 better-scroll 插件

// 引入插件
import BetterScroll from 'better-scroll'
mounted(){
    new BetterScroll(this.$refs.wrapper, {
      movable: true,
      zoom: true
    })
  },
methods: {
    async getData(){
      let res = await axios({
        url:'/api/index_list/0/data/1'
      });
      this.items = Object.freeze(res.data.data.topBar);
      this.newData = Object.freeze(res.data.data.data);
    },
}

从代码可以看出，是加载插件，再渲染数据。应该是当dom都加载完毕，再去执行 BetterScroll

可以使用 this.$nextTick()

methods: {
    async getData(){
      let res = await axios({
        url:'/api/index_list/0/data/1'
      });
      this.items = Object.freeze(res.data.data.topBar);
      this.newData = Object.freeze(res.data.data.data);
      // 当dom都加载完毕了再去执行
      this.$nextTick(() => {
        new BetterScroll(this.$refs.wrapper, {
          movable: true,
          zoom: true
        })
      })
    }
}