better-scroll封装上拉刷新，下拉加载更多功能

一、better-scroll的初始使用

首先下载

cnpm install better-scroll

在代码中引用

import BScroll from ‘better-scroll’

接下来便是new

let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)//wrapper是外层较小的那个盒子

⚠️：使用原理必须是外层有一个较小的盒子，外层有一个较大的盒子，这样才可以滚动起来。

同时new BScroll的时候需要获取真实的DOM元素，所以需要在mounted生命周期内进行。

二、特点

会使click事件失效

会使tap事件失效

解决方案，在new的时候，设置click，tap为true

1 mounted(){
2         this.scroll = new BScroll(this.$refs.wrapper,{
3             tap:true,
4             click:true
5         })
6     },

三、对better-scroll的二次封装

在better-scroll的封装文件中（vue）

 1 <template>
 2     <div class="wrapper" ref="wrapper">
 3         <slot></slot>
 4     </div>
 5 </template>
 6 
 7 <script>
 8 import BScroll from "better-scroll"
 9 export default {
10     name:"alley-BScroll",
11     mounted(){
12         this.scroll = new BScroll(this.$refs.wrapper,{
13             tap:true,
14             pullDownRefresh:true,//这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新
15             pullUpLoad:true//这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
16         })
17     },
18     methods:{
19         //下拉刷新加载数据
20         handlepullingDown(callback){
21              this.scroll.on("pullingDown",()=>{
22                  callback();
23              })
24         },
25         //下拉刷新加载数据完毕通知better-scroll
26         handlefinishPullDown(){
27             this.scroll.finishPullDown();//通知bettwer-scroll已经加载完毕
28             this.scroll.refresh();//重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
29         },
30         //上拉加载更多
31         handlepullingUp(callback){
32             this.scroll.on("pullingUp",()=>{
33                 callback()
34             })
35         },
36         handlefinishPullUp(){
37             this.scroll.finishPullUp();
38             this.scroll.refresh();
39         }
40     }
41 }
42 </script>
43 
44 
45 <style>
46     .wrapper{
47         height: 100%;
48     }
49 </style>

在要使用该使用该封装的组件，只需要用这个组件将要出现效果的元素包裹起来即可，如下所示，包起来后，内容便可以有弹性的滑动了。

 1 <alley-BScroll ref="alleyscroll">
 2       <div class="movie_body">
 3         <div
 4           class="movie_item"
 5           v-for="(item,index) in movieList"
 6           :key="index"
 7           @click="handleclick()"
 8         >
 9           <div class="movie_item_pic">
10             <img :src="item.img |ToImg('128.180')" />
11           </div>
12           <div class="movie_item_info">
13             <h2>{{item.nm}}</h2>
14             <p>
15               观众评:
16               <span class="grade">{{item.sc}}</span>
17             </p>
18             <p>
19               主演：
20               <span>{{item.star}}</span>
21             </p>
22             <p>
23               <span>{{item.showInfo}}</span>
24             </p>
25           </div>
26           <div
27             :class="item.globalReleased?'movie_item_btn asale':'movie_item_btn ticket'"
28           >{{item.globalReleased?'购票':'预售'}}</div>
29         </div>
30       </div>
31     </alley-BScroll>

接下来便可以调用封装组件里的方法了，因为需要获取DOM元素，便要写在mounted这个生命周期内。

 1 mounted(){
 2   //下拉刷新
 3     this.$refs.alleyscroll.handlepullingDown(async ()=>{
 4       
 5         let n = parseInt(Math.random()*7);
 6         let arr = [10,1,20,40,50,55,59]
 7 
 8 
 9 
10         let data = await movie_now_api(arr[n]);
11         this.movieList = data.data.movieList;
12         sessionStorage.setItem("movieList",JSON.stringify(data.data.movieList))
13         this.$refs.alleyscroll.handlefinishPullDown();//下拉刷新完成后，通知better-scroll，下拉刷新已经完成。
14     })
15 
16 
17     //上拉加载更多
18     this.$refs.alleyscroll.handlepullingUp(async ()=>{
19         let n = parseInt(Math.random()*7);
20         let arr = [10,1,20,40,50,55,59]
21         let data = await movie_now_api(arr[n]);
22         this.movieList = [...this.movieList,...data.data.movieList];
23         sessionStorage.setItem("movieList",JSON.stringify(data.data.movieList))
24         this.$refs.alleyscroll.handlefinishPullUp();
25     })
26   }

better-scroll封装上拉刷新，下拉加载更多功能

猜你喜欢