better-scroll

用于解决移动端的滚动场景的插件,用了它之后电脑端的鼠标滚动和元素的  position : sticky 属性都不好用了。

可以单独用于 html 也可引用于 vue 中

HTML 

下载 better-scorll js 代码

引用：script 标签引入

const bscroll = new BScroll(document.querySelector('.wrapper"))； //可以不传参数

const bscroll = new BScroll(document.querySelector('.wrapper"),{ //可以传如下参数

        probeType:2,

        click: true,

        pullUpLoad:ture

})；

bscroll.on('scroll", (position) =>{

        console.log(position); //probeType 等于0 的时候 postion 是取不到值的

         //默认情况下 BScroll 是不可以实时监听滚动的位置

         //probeType 0: 不侦测   1：延时侦测   2 在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测 3 实时侦测，只要是滚动都侦测

})

document.querySelector('.btn').addEventListener('click',function(){

       console.log("如果点击滚动区域里的东西，监听不到点击事件的话，需要设置 click: true ,一般不设置的话  button 的点击时间可以进行，但是 div 等其他标签的的点击时间会被屏蔽")

})

bscroll.on('pullingUp', ()=>{

       console.log("监听上拉加载更多 pullUpLoad:ture，发送网络请求在这里调用后端数据")

      //等数据请求回来，并且展示的时候要调用

      bscroll.finishPullUp()

})

html code:

<div class="wrapper"><div class="content">wrapper 中只能有一个元素</div></div>

.wrapper {

        height:100px;

       overflow:hidden;

}

Vue

安装：npm install better-scroll -- save

引用：import BScroll from 'better-scroll'

将 Better scorll 封装成一个组件

Score.vue
 

<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script type="text/javascript">
import BScroll from 'better-scroll'
export default {
    name: "scroll",
    data() {
        return {
            scroll: {
                type: Object,
                default () {
                    return {}
                }
            }
        }
    },
    //接收父组件来的值
    props: {
        probeType: {
            type: Number,
            default: 0 //这里设置一个默认的值，如果调用该组件的时候没有传这个值，就说明不想监听滚动
        },
        pullUpLoad: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        /**创建 BScroll 对象
         * probeType 监听滚动
         * 0: 不侦测 postion 是取不到值的
         * 1：延时侦测 
         * 2: 在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
         * 3 实时侦测，只要是滚动都侦测
         * click: true 让 scorll 里的元素可以监听点击时间，不设置的话只有 button 可以监听点击
         * pullUpLoad： true 监听上拉加载更多
         */
        this.scroll = new BScroll(this.$refs.wrapper, {
            probeType: this.probeType,
            click: true,
            pullUpLoad: this.pullUpLoad,
            mouseWheel: true, //监听鼠标滚轮
        })

        if (this.probeType) {
            this.scroll.on('scroll', (postion) => {
                //监听滚动的位置
                this.scroll && this.$emit('scroll', postion)
            })
        }

        if (this.pullUpLoad) {
            this.scroll.on('pullingUp', () => {
                //监听上拉加载更多 pullUpLoad:ture
                this.scroll && this.$emit('pullingUp')
            })
        }
    },
    methods: {
        scrollTo(x = 0, y = 0, time = 300) {
            // y=0 用于回到顶部，time 意思是用了多久回到顶部
            this.scroll && this.scroll.scrollTo(x, y, time);
        },
        finishPullUp() {
            /**finishPullUp: 这个类似控制一个开关，在触发pullingUp事件的时候，插件肯定会把一个开关给关掉，防止用户重复上拉
             * 在数据加载完成以后，需要执行finishPullUp()把开关打开，以便下次可以继续执行上拉刷新；*/
            this.scroll && this.scroll.finishPullUp();
        },
        refresh() {
            // refresh：其实就是重新计算一下内容的高度和宽度，也许也会计算外框的高度和宽度，因为dom结构发生了变化了，所以宽高要从新计算
            this.scroll && this.scroll.refresh();
            console.log("refresh1");
        },
        getScrollY(){ //获取页面Y轴滚动的位置
            console.log(this.scroll);
            return this.scroll ? this.scroll.y : 0;
        }
    }
}




/**Better-score 有时候可滚动区域不准确
 * 这是因为 better scroll 在一开始计算 scrollerHeight 属性的时候是没有把未加载成功的图片高度计算在内的
 * 图片都是异步加载的，等图片加载完成之后，可滚动区域就加高了但是 scrollerHeight 属性没有进行更新.
 * 因此要手动的调用 refresh 方法重新计算高度。
 * 如何解决这个问题？监听每一张图片是否加载完成，加载完一张就执行一遍 refresh
 * 如何监听图片加载完成 js img.onload = function(){}  vue <img @load="imageLoad" />
 * */

</script>