vue小案例-移动端better-scroll结合懒加载图片

//封装的滚动插槽
<!--
 * @Descripttion: 
 * @version: v.1
 * @Author: 吴泽豪
 * @Date: 2023-02-08 19:27:21
 * @LastEditors: 吴泽豪
 * @LastEditTime: 2023-02-22 21:48:07
-->
<template>
  <div class="scroll" ref="wscroll">
    <div>
      <div v-show="isload">加载中</div>
      <slot></slot>
    </div>
  </div>
</template>
 
<script>
import BScroll from "@better-scroll/core";
import ObserveDOM from "@better-scroll/observe-dom";

export default {
  name: "wscroll",
  props: {
    probeType: {
      type: Number,
      default: 1
    },
    /**
     * 点击列表是否派发 click事件
     */
    click: {
      type: Boolean,
      default: true
    },
    /**
     * 是否开启横向滚动
     */
    scrollX: {
      type: Boolean,
      default: false
    },
    isload: {
      type: Boolean,
      default: false
    }
  },
  computed:{ 
  },
  data() {
    return {
    };
  },
  mounted() {
    const that = this;
    this.$nextTick(() => {
      BScroll.use(ObserveDOM);
      if (!this.$refs.wscroll) {
        return;
      }
      // 配置 better-scroll
      this.scroll = new BScroll(this.$refs.wscroll, {
        observeDOM: true,
        probeType: this.probeType, // 何时派发 scroll事件
        click: this.click, // 点击列表是否派发
        scrollX: this.scrollX, // 是否开启横向滚动
        scrollY: true,
        movable: true,
        zoom: true
      });
      if (this.probeType > 0) {
        this.scroll.on("scrollStart", () => {
        });
        this.scroll.on("scroll", context => {
          that.$emit("scrollCallBack", context);
        });
        this.scroll.on("scrollEnd", pos => {
          let clientTop = parseInt(window.innerHeight || document.documentElement.clientHeight) 
          let containerTop = parseInt(-pos.y)
          let imgdom =  document.getElementsByClassName("scroll")[0].getElementsByTagName("img")
          for(let i = 0; i < imgdom.length; i++){
            console.log(imgdom[i], clientTop, containerTop)
            let domHeight = imgdom[i].offsetTop
            //提前 20 加载
            if(domHeight - 20 <= (clientTop + containerTop)){   
              const srcdata = imgdom[i].getAttribute("data-src")
                imgdom[i].setAttribute("src", srcdata)
            }
            
          }
        });
      }
    });
  },
  destroyed() {
    this.scroll.destroy();
  },
  activated() {
    this.scroll.enable();
    this.scroll.refresh();
  },
  deactivated() {
    this.scroll.disable();
  }
};
</script>
<style lang="scss" scoped>
.scroll {
  overflow-y: hidden;
  height: 100vh;
}
</style>

//调用
<!--
 * @Descripttion: 
 * @version: v.1
 * @Author: 吴泽豪
 * @Date: 2023-02-08 16:29:32
 * @LastEditors: 吴泽豪
 * @LastEditTime: 2023-02-22 21:04:45
-->
<template>
  <wscroll @scrollCallBack="scrollCallBack" :isload="isload">
      <div v-for="(item, key) in dataList" :key="key">{{ item }}这是每一行</div> 
       <img  src="" data-src="https://cdn.ancii.com/avatar/v1/iS/Dy/d-/-dDSyipcONky3n6khU8t2w.jpg">
  </wscroll>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      // 列表数据
      dataList: [1,2,1,1,1,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,1,1,1,,1,1,1,1,1,1,1,,1,1,1,1,1],
      // 是否派发顶部下拉的事件，用于下拉加载
      isload: false
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    // 重新拼接获取的列表数据
    loadData() {
      console.log(1111);
    },
    scrollCallBack(context){

      console.log(context)
      let y = context.y
      if(y > 100){
            this.isload = true
            setTimeout(()=>{
              [2,2,2,2,2,2,2,2,2,2,2,2,2,22,2,2].map((item)=>{
              this.dataList.push(item)
              })
              this.isload = false
            },1000)
          }
    }
  }
};
</script>