当前位置: 首页 > 工具软件 > BetterScroll > 使用案例 >

Vue中使用BetterScroll

孟安民
2023-12-01

1、下载:

npm install @better-scroll/core --save

地址:https://better-scroll.github.io/docs/zh-CN/guide/
用到了下拉,所以下载:

npm install @better-scroll/pull-up --save

2、返回顶部

注:达到临界值的时候,返回顶部显示,没有到隐藏
1)在使用的页面调用组件,页面的写法如下:

<!--
 * @Author: 
 * @Date: 2020-10-18 15:02:55
 * @LastEditors: 
 * @LastEditTime: 2020-10-18 18:18:20
 * @FilePath: /attempt/src/pages/BetterScroll/Index.vue
 * @Description: 
-->
<template>
    <div>
        <scroll class="content" ref="scroll" @scroll="contentScroll">
            <ul>
            	<!-- 这块好li -->
                <li>列表1</li>
                <li>列表2</li>
                。。。。。。
            </ul>
        </scroll>
        <!-- click.native 是监听组件的点击-->
        <BackTop @click.native="backTop" v-show="show" />
    </div>
</template>
<script>
import scroll from "@/components/common/scroll/Scroll.vue";
import BackTop from '@/components/common/backTop/BackTop.vue';
export default {
    components: {
        scroll,
        BackTop
    },
    data(){
        return {
            show:false
        }
    },
    methods: {
        /**
         * 回到顶部,在父里面通过ref取得子组件里面的方法
         * (位置,位置,毫秒(指的是 在多少毫秒返回顶部))
         */
        backTop() {
            console.log("回到顶部");
            this.$refs.scroll.scrollTo(0, 0, 500);
        },
        //
        contentScroll(position){
            console.log(position.y);
            //打印出来是负的
            this.show = - position.y > 700
        }
    },
}
</script>
<style scoped>
.content {
    height: 100vh;
    background: blueviolet;
    overflow: hidden;
    /* overflow: hidden;
    overflow-y: scroll; */
}
</style>

2)封装BetterScroll的组件(这块是复用的),组件路径src/components/common/scroll/Scroll.vue

<!--
 * @Author: 
 * @Date: 2020-10-18 17:02:23
 * @LastEditors: 
 * @LastEditTime: 2020-10-18 18:13:39
 * @FilePath: /attempt/src/components/common/scroll/Scroll.vue
 * @Description: 
-->
<template>
    <!-- wrapper里面只有一个元素(同时 获取元素的时候,建议用ref),并且 要有固定高度 -->
    <div class="wrapper" ref="bsWrapper">
        <div class="content">
            <!-- 在外面调用的时候,把所有的内容,都插入了进来,确保里面只包裹一个元素 -->
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core';

//下拉
import Pullup from '@better-scroll/pull-up';
BScroll.use(Pullup)
export default {
    data() {
        return {
            bscroll: null
        }
    },
    // 取元素只能在mounted里(要不然会报null 或者 undefined)
    mounted() {
        // 1、常见BScroll对象
        this.bscroll = new BScroll(this.$refs.bsWrapper, {
            probeType: 3,//这里设置2 和 3的时候,实时监听,设置2的时候,惯性滚动不可以监听,3惯性滚动 也可以监听;0和1 什么都不监听 (这块可以考虑,从外面传入)
            pullUpLoad: true,
            click:true,//这个设置为true的时候,div才可以被点击
            // scrollY: true,
            // pullDownRefresh: true
        })
        // 2、监听
        // 判断下拉距离的(需要用的时候,要传出去)
        this.bscroll.on('scroll', (position) => {
            // console.log(position);
            this.$emit("scroll",position)
        })
        // 到底部(他没有 参数)
        this.bscroll.on('pullingUp', () => {
            console.log("你好");
        })
        // 返回顶部
        this.bscroll.scrollTo(0, 0);
    },
    methods: {
        /**
         * @description: 给一个返回顶部的函数
         */
        scrollTo(x, y, time = 400) {
            this.bscroll.scrollTo(x, y, time);
        }
    },
}
</script>
<style scoped>
.wrapper {
    height: 100%;
    width: 100%;
}
</style>

3)封装一个返回的组件

<template>
    <div class="backTop">
        <button>回到<br />顶部</button>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
    .backTop{
        position:fixed;
        bottom:0;
        right:0;
    }
</style>

3、下拉加载更多

1)在页面调用组件

<template>
    <div>
        <scroll class="content" ref="scroll" @scroll="contentScroll" @pullingUp="loadMore">
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                。。。。。。
            </ul>
        </scroll>
    </div>
</template>
<script>
import scroll from "@/components/common/scroll/Scroll.vue";
export default {
    components: {
        scroll,
    },
    data(){
        return {
            show:false
        }
    },
    methods: {
        // 下拉
        loadMore(){
            console.log("上拉事件");
            this.$refs.scroll.finishPullUp();
        }
    },
}
</script>
<style scoped>
.content {
    height: 100vh;
    background: blueviolet;
    overflow: hidden;
    /* overflow: hidden;
    overflow-y: scroll; */
}
</style>

2)下拉组件的初步封装
注:防抖函数,在一般的情况下 用不到,在加载图片的时候,要使用。

<template>
    <!-- wrapper里面只有一个元素(同时 获取元素的时候,建议用ref),并且 要有固定高度 -->
    <div class="wrapper" ref="bsWrapper">
        <div class="content">
            <!-- 在外面调用的时候,把所有的内容,都插入了进来,确保里面只包裹一个元素 -->
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from '@better-scroll/core';

//下拉
import Pullup from '@better-scroll/pull-up';
BScroll.use(Pullup)
export default {
    data() {
        return {
            bscroll: null
        }
    },
    // 取元素只能在mounted里(要不然会报null 或者 undefined)
    mounted() {
        // 1、常见BScroll对象
        this.bscroll = new BScroll(this.$refs.bsWrapper, {
            probeType: 3,//这里设置2 和 3的时候,实时监听,设置2的时候,惯性滚动不可以监听,3惯性滚动 也可以监听;0和1 什么都不监听 (这块可以考虑,从外面传入)
            pullUpLoad: true,//这个上拉加载,这里也尽量写成动态的
            click:true,//这个设置为true的时候,div才可以被点击
            // scrollY: true,
            // pullDownRefresh: true
        })
        // 2、监听
        // 判断下拉距离的(需要用的时候,要传出去)
        this.bscroll.on('scroll', (position) => {
            // console.log(position);
            this.$emit("scroll",position)
        })
        // 到底部(他没有 参数)
        this.bscroll.on('pullingUp', () => {
            // console.log("上拉事件");
            this.$emit("pullingUp");
        })
        //拿到 BScroll对象
        console.log(this.bscroll);

    },
    methods: {
        /**
         * @description: 给一个返回顶部的函数
         */
        scrollTo(x, y, time = 400) {
            this.bscroll && this.bscroll.scrollTo(x, y, time);
        },
        /**
         * @description: 这个是下拉下载的,如果在每次下拉完成后,不调用这个函数,他就没办法使用第二次
         */
        finishPullUp(){
            this.bscroll && this.bscroll.finishPullUp();
        },
        /**
         * 但上面的这个 会产生一个bug,所以在数据加载完成,要调用一个函数(重新计算滚动高度)
         * 监听图片加载完成 <img src="" alt="" onLoad="imgLoad" >
         * 
         */
        refresh(){
            let fun = this.bscroll && this.bscroll.refresh();
            this.debounce(fun,500);
        },
        /**
         * 函数防抖
         * fun函数  传函数的时候,不要加括号
         * delay等待多久
         * 
         */
        debounce(fun,delay){
            let time = null;
            // 下面是一个闭包
            return function(...args){
                if(time) clearTimeout(time);
                time = setTimeout(() => {
                    fun.apply(this,args);
                },time);
            }
        }
    },
}
</script>
<style scoped>
.wrapper {
    height: 100%;
    width: 100%;
}
</style>
 类似资料: