解决better-scroll中图片上拉拉不动的问题

hmy5678

于 2022-03-08 09:47:54 发布

阅读量488

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/hmy5678/article/details/123344829

版权

一.原因

Better-Scroll内部加载图片机制：

Better-Scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定

。scrollerHeight属性根据放Better-Scroll的content的子组件的高度

。但在首页中，刚开始在计算scrollerHeight属性时，没有将图片计算在内，

。所以计算出来的高度是错误的，当图片加载进来后有了新的高度，但是scrollerHeigh属性并没有进行更新，这样滚动就会出现问题。

二.解决方法

监听每一张图片是否加载完成，只要有一张图片加载完成了，就执行一次scroll的refresh()

三.步骤

在展示数据的listItems页面中，给img添加原生js监听

//html代码
<img :src="goodItem.img" alt="" @load="isLoadOk">

当图片加载后，给父组件发射事件

 methods: {
          isLoadOk() {
            this.$bus.$emit('imageLoad');
          }
        }

在这里，listItem跟home并不是父子组件间的通信，因此在这里要选择事件总线
```
//main.js中生成一个Vue

//创建一个Vue生成事件总线
Vue.prototype.$bus = new Vue()
```
如果图片数据非常多，为了防止refresh非常频繁的问题，需要进行防抖操作

<template>
    <scroll class="content"  ref="scroller"> </scroll>
</template>

<script>
//此段代码写在home.vue中
methods: {
//防抖动函数
debounce(func,delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this,args)
     },delay)
    }
  }
},
mounted() {
    const refresh = this.debounce(this.$refs.scroller.srcRefresh,200)
    this.$bus.$on("imageLoad", () => {
      refresh()
    });
  }  

</script>