<template>     <!-- 封装滚动组件 -->     <div class="wrapper" ref="swiper">         <!-- wrapper里面只能放一个元素，就是滚动的 -->         <div class="content">             <slot></slot>         </div>     </div> </template>
<script> import BScroll from "better-scroll"; export default {     name: "Scroll",     props: {         probeType: {             type: Number,             default() {                 //默认是0， 不监听滚动                 return 0;             }         }     },     data() {         return {             scroll: null         };     },     mounted() {         this.scroll = new BScroll(this.$refs.swiper, {             click: true,             probeType: this.probeType         });         //监听滚动的位置;         this.scroll.on("scroll", position => {             console.log(position);             this.$emit("scroll", position);         });         //监听上拉加载事件         //    this.scroll.on('pullingUp',()=>{         //        //发射一个自定义事件         //        this.$emit('pullingUp');         //    });     },     methods: {         //返回顶部         scrollTop(x, y, time = 300) {             //给它在外面做一层封装, 给它设置一个默认的滚动时间，300毫秒;             this.scroll.scrollTo(x, y, time);         },         //每当图片加载完成后，重新计算可滚动的区域         refresh() {             this.scroll && this.scroll.refresh();             // 因为this.scroll是写在mounted中             //怕存在 还没有值的情况就调用函数;             //意思是只有当 this.scroll 创建完成后 才会执行 this.scroll.refresh()         },         //当上拉加载事件完成后，调用此方法，才可以进行下一次上拉加载;         finishPullUp() {             this.scroll && this.scroll.finishPullUp();         }     } }; </script>
<style lang="less"> .wrapper {     height: calc(         100vh - 96px     ); //切记使用 calc 的时候，里面的 - 左右两边一定要有个空格，快被这个bug搞死了;     background-color: #fff;     overflow: hidden;     margin-top: 46px; } </style>   better-scroll.js官网：https://github.com/ustbhuangyi/better-scroll      中文文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88