Vue下拉刷新，上拉加载使用better-scroll插件的实现方法

kekechen丶

已于 2022-01-27 21:13:51 修改

阅读量733

点赞数 1

文章标签： vue.js javascript elementui

于 2022-01-23 16:58:10 首次发布

本文链接：https://blog.csdn.net/m0_63851202/article/details/122653638

版权

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

下载安装：

npm il better-scroll --save

基本写法

<template>
    <div class="wrapper">
        <ul>
            <div v-show="downShow">加载中…………………………</div>
            <li v-for="(book,index) in books" :key="index">
                <p>编号：{{book.id}}</p>
                <p>书名：{{book.name}}</p>
                <p>价格：¥{{book.price}}</p>
                <img :src="book.img">
            </li>
            <div v-show="upShow">加载中…………………………</div>
        </ul>
    </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";

// 分页：
// 每页多少条
// 当前是第几页
export default {
    name:"BookList",
    data(){
        return{
            books:[],
            downShow:false,
            upShow:false,
            pageIndex:1
        }
    },
    created(){   
       this.getBooks();
    },
    methods:{
        getBooks(){
            axios({
                url:"/books?_page="+this.pageIndex+"&_limit=5"
            })
            .then(res=>{
                this.pageIndex++;

                this.books = res.data;//????                

                this.$nextTick(()=>{

                    let scroll = new BScroll('.wrapper',{
                        scrollY: true,
                        pullDownRefresh: { //下拉刷新的配置
                            threshold: 30 // 当下拉到超过顶部 30px 时，触发 pullingDown 事件
                        },
                    }) 

                    scroll.on("pullingDown",()=>{
                        this.downShow = true;
                        //发送请求获取书籍
                        axios({
                             url:"/books?_page="+this.pageIndex+"&_limit=5"
                        })
                        .then(res=>{   
                            this.pageIndex++;
                            
                            this.books =  [...res.data,...this.books];

                            this.downShow = false;

                            this.$nextTick(()=>{
                                scroll.finishPullDown();
                                scroll.refresh();
                            });
                            
                        })
                    })

                });                
            })
        }       
    },
    mounted(){        
    }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  /* background-color:lightpink; */
}


img {
  width: 100%;
  height: 200px;
}
</style>

封装写法

<template>
    <div class="wrapper">
        <ul>
            <div v-show="downShow">加载中…………………………</div>
            <li v-for="(book,index) in books" :key="index">
                <p>编号：{{book.id}}</p>
                <p>书名：{{book.name}}</p>
                <p>价格：¥{{book.price}}</p>
                <img :src="book.img">
            </li>
            <div v-show="upShow">加载中…………………………</div>
        </ul>
    </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";

// 分页：
// 每页多少条
// 当前是第几页
export default {
    name:"BookList",
    data(){
        return{
            books:[],
            downShow:false,
            upShow:false,
            pageIndex:1,
            scroll:null
        }
    },
    created(){   
       this.getBooks();
    },
    methods:{
        getBooks(){
            axios({
                url:"/books?_page="+this.pageIndex+"&_limit=5"
            })
            .then(res=>{
                this.pageIndex++;
                this.books = res.data;//????               

                this.$nextTick(()=>{
                    this.initBScroll();                  
                });       
            })
        },

        initBScroll(){
            // 创建Better-Scroll 对象
            this.scroll = new BScroll('.wrapper',{
                scrollY: true,
                pullDownRefresh: { //下拉刷新的配置
                    threshold: 30 // 当下拉到超过顶部 30px 时，触发 pullingDown 事件
                },
            }) 
            // 给Better-scroll对象绑定下来刷新的函数
            this.scroll.on("pullingDown",()=>{
                this.downShow = true;
                //发送请求获取书籍
                this.getBooks2();
            })
        },
        getBooks2(){
             axios({
                url:"/books?_page="+this.pageIndex+"&_limit=5"
            })
            .then(res=>{   
                this.pageIndex++;                    
                this.books =  [...res.data,...this.books];
                this.downShow = false;
                this.$nextTick(()=>{
                    this.scroll.finishPullDown();
                    this.scroll.refresh();
                });                    
            })
        }      
    },
    mounted(){        
    }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  /* background-color:lightpink; */
}

img {
  width: 100%;
  height: 200px;
}
</style>

进一步封装写法

<template>
    <div class="wrapper">
        <ul>
            <div v-show="downShow">加载中…………………………</div>
            <li v-for="(book,index) in books" :key="index">
                <p>编号：{{book.id}}</p>
                <p>书名：{{book.name}}</p>
                <p>价格：¥{{book.price}}</p>
                <img :src="book.img">
            </li>
            <div v-show="upShow">加载中…………………………</div>
        </ul>
    </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";

// 分页：
// 每页多少条
// 当前是第几页
export default {
    name:"BookList",
    data(){
        return{
            books:[],
            downShow:false,
            upShow:false,
            pageIndex:1,
            scroll:null
        }
    },
    created(){   
       this.getBooks(()=>{
            this.$nextTick(()=>{
                this.initBScroll();                  
            });
        });
    },
    methods:{
        getBooks(cb){
            axios({
                url:"/books?_page="+this.pageIndex+"&_limit=5"
            })
            .then(res=>{
                this.pageIndex++;
                this.books = [...res.data,...this.books];                
                cb();
            })
        },
        initBScroll(){
            // 创建Better-Scroll 对象
            this.scroll = new BScroll('.wrapper',{
                scrollY: true,
                pullDownRefresh: { //下拉刷新的配置
                    threshold: 30 // 当下拉到超过顶部 30px 时，触发 pullingDown 事件
                },
            }) 
            // 给Better-scroll对象绑定下来刷新的函数
            this.scroll.on("pullingDown",()=>{
                this.downShow = true;
                //发送请求获取书籍
                this.getBooks(()=>{
                    this.downShow = false;
                    this.$nextTick(()=>{
                        this.scroll.finishPullDown();
                        this.scroll.refresh();
                    });  
                });
            })
        },     
    }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  /* background-color:lightpink; */
}

img {
  width: 100%;
  height: 200px;
}
</style>