BetterScroll、移動端、滾動事件，如何使用

使用過的方法

http://ustbhuangyi.github.io/better-scroll/doc/

better-scroll  第三插件，解決下拉加載

 

 

 

 

它只能管理第一個元素

<div class="wrapper"> 

<ul class="content"> 
　　<li>...</li>
 　<li>...</li> 
... </ul>
 <!-- 這里可以放一些其它的 DOM，但不會影響滾動 --> 

</div>

 

 

 使用步驟：

第一步：安裝

 

 

 //yarn    安裝不成功還成cnpm  來安裝。

 

 

 

 

 

 

 

 

 

2、確定布局沒問題，父容器的高度要小於子容器，（注意只能作用一個子容器上哦）

3、引入，import BScroll from "better-scroll" （局部引入，引入需要的組件中）

 

4、在mounted 聲明周期中實例化（記得這個數據已經跟模板結合了，可以獲得真實DOM元素，swiper）

 

 

 

 

 

 

 

 

 

---

 

二次封裝   better-scroll

<template>
    <div class="wrapper" ref="wrapper">
        <slot></slot>
    </div>
</template>


<script>
import BScroll from "better-scroll";
export default {
    name:"Alley-Bscroll",
    mounted(){
        this.scroll = new BScroll(this.$refs.wrapper,{
            //開啟下拉刷新
            pullDownRefresh:true,
            //開啟上拉加載更多
            pullUpLoad:true
        });
    },
    methods:{
        //下拉刷新
        handlepullingDown(cb){
            this.scroll.on("pullingDown",()=>{
                cb()
            })
        },
        //下拉刷新后通過bscroll可以做下一次請求，
        handlefinishPullDown(){
            this.scroll.finishPullDown();
            //並且重新計算滾動區域的高度
            this.scroll.refresh();
        },
        //上拉加載更多
        handlepullingUp(cb){
            this.scroll.on("pullingUp",()=>{
                cb();
            })
        },
        //上拉加載更多后通過bscroll可以做下一次請求
        handlefinishPullUp(){
        
            this.scroll.finishPullUp();
            //並且重新計算滾動區域的高度
            this.scroll.refresh();
         
        }
    }
}
</script>

<style>
    .wrapper{
        /* height: 100%; */
        height: 7rem;
    }
</style>

 

 

使用封裝

直接在外層套上