vue 3.2.6:用better-scroll实现上拉加载/下拉刷新/滚动翻页(better-scroll@2.4.2)

一，better-scroll的地址:

代码地址:

https://github.com/ustbhuangyi/better-scroll

在npm的地址:

https://www.npmjs.com/package/better-scroll

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

 

二，安装better-scroll:

liuhongdi@lhdpc:/data/vue/storeweb$ npm install better-scroll -S
 
added 16 packages in 8s

三，编写代码

List.vue

<template>
  <div class="wrapper" style="100%;height:100%;background: #ffff00;">
    <div class="content">
       <div class="posi_ref" style="display: none;">
           <i class="el-icon-loading"></i>下拉刷新
       </div>
       <div>分类</div>
       <div>{{msg}}</div>
       <template v-for="(goodsOne,index) in listAll" :key="index">
          <router-link :to="{ path: '/list/detail', query: { goodsId: goodsOne.id }}">
             <div  style="height:120px;line-height:120px;">
                  {{ goodsOne.id }}
             </div>
          </router-link>
      </template>
    </div>
  </div>
</template>

<script>
import { ref,onMounted,reactive} from "vue";
import {apiGoodsList} from "../../api/api";
//引入better-scroll
import BScroll from 'better-scroll';
export default {
  name: "List",
  setup() {
    //当前是第几页，默认是第一页
    const curPage = ref(1);
    //保存用户数据的变量
    const msg = ref("");
    //better scroll
    let bscroll = reactive({});
    onMounted(() => {
             bscroll = new BScroll(document.querySelector('.wrapper'),{
               scrollY: true,
               probeType:3,
               click:true,
               //pullUpLoad:true,
               pullUpLoad:{
                  // 当上拉距离超过10px时触发 pullingUp 事件
                  threshold: -10
               },
               mouseWheel: true,
               pullDownRefresh:{
                 stop:0,
                 threshold:40
               },
             })
             bscroll.on("pullingUp",async ()=>{
               console.log('现在正在上拉加载更多...')
               await info();//请求数据
               bscroll.finishPullUp();//上拉加载动作结束,
               bscroll.refresh();//重新计算 BetterScroll
             })
            bscroll.on('pullingDown', async () => {
               console.log('处理下拉刷新操作')
              //设置当前页为第一页
              curPage.value = 1;
               //清空数组
              listAll.length = 0;
              await info();//请求数据
              bscroll.finishPullDown();//下拉加载动作结束
              bscroll.refresh();//重新计算 BetterScroll
           });
      //显示 下拉刷新
      bscroll.on("scroll",function(){
        if(this.y>10){
          document.querySelector('.posi_ref').style.display = "";
        }else{
          document.querySelector('.posi_ref').style.display = "none";
        }
      });
    });
    //保存页面数据的数组
    let listAll = reactive([]);

    //从接口获取用户信息
    const info = () => {
      apiGoodsList({
        p: curPage.value,
      }).then(res => {
        //成功
        if (res.code == 0) {
          //说明：此处我们从客户端添加数据仅供演示，正常情况应该从服务端api返回
          msg.value = res.data.msg;
          //第四页
          if (curPage.value == 4) {
            curPage.value = 5;
            return;
          }
          //第三页
          if (curPage.value == 3) {
            curPage.value = 4;
            let listOne = [{"id":21},{"id":22},{"id":23},{"id":24},{"id":25},
              {"id":26},{"id":27},{"id":28},{"id":29},{"id":30},];
            listAll.push(...listOne);
            console.log(listAll);
            return;
          }
          //第二页
          if (curPage.value == 2) {
            curPage.value = 3;
            let listOne = [{"id":11},{"id":12},{"id":13},{"id":14},{"id":15},
              {"id":16},{"id":17},{"id":18},{"id":19},{"id":20},];
            listAll.push(...listOne);
            console.log(listAll);
            return;
          }
          //第一页
          if (curPage.value == 1) {
            curPage.value = 2;
            //list.value = {1,2,3,4,5,6,7,8,9,10}
            let listOne = [{"id":1},{"id":2},{"id":3},{"id":4},{"id":5},
              {"id":6},{"id":7},{"id":8},{"id":9},{"id":10},];
            listAll.push(...listOne);
            console.log(listAll);
            return;
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    };
    info();
    return {
      info,
      msg,
      listAll,
    };
  }
}

</script>

<style scoped>
.wrapper{
  overflow: hidden;
}
</style>

 

 

四，查看效果

五，查看better-scroll版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list better-scroll
storeweb@0.1.0 /data/vue/storeweb
└── better-scroll@2.4.2

       查看vue.js的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue
storeweb@0.1.0 /data/vue/storeweb
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.6 deduped
├─┬ element-plus@1.1.0-beta.7
│ └── vue@3.2.6 deduped
├─┬ vue-router@4.0.11
│ └── vue@3.2.6 deduped
└── vue@3.2.6