基於Vuescroll.js封裝上拉加載、下拉刷新組件實際應用開發

什麼是 vuescroll

摘自官網描述： vuescroll 是一款基於 Vue.js 自定義滾動條的插件，它有兩種模式: native: 適用於 PC 端，支持基本的自定義滾動條。 slide: 適用於移動端， 支持下拉-加載，上拉刷新，輪播等。 可是，這並不意味着 slide模式只能用於移動端，只是由於移動端與 slide 模式更加契合而已。廢話很少說，直接上代碼

安裝

npm install vuescroll --save

全局註冊

// **main.js**
import Vue from 'vue';
import vuescroll from 'vuescroll';

// 你能夠在這裏設置全局配置
Vue.use(vuescroll, {
  ops: {}, // 在這裏設置全局默認配置
  name: 'myScroll' // 在這裏自定義組件名字，默認是vueScroll
});
/*
 * 或者
 */
Vue.use(vuescroll); // install the vuescroll first
Vue.prototype.$vuescrollConfig = {
  bar: {
    background: '#000'
  }
};

局部註冊

<template>
  <vuescroll> <!-- 你的內容... --> </vuescroll>
</template>
<script>
  import vuescroll from 'vuescroll';

  export default {
    components: {
      vuescroll
    }
  };
</script>

本地封裝vue-scroll.vue組件

<template>
    <div class="pr-wrap">
        <div class="wrap-part first">
            <vuescroll
                ref="vs"
                :ops="ops"
                @refresh-start="handleRS"
                @load-before-deactivate="handleLBD"
                @refresh-before-deactivate="handleRBD"
                @load-start="handleLoadStart"
            >
                <slot></slot>
                <div slot="load-beforeDeactive" v-if="noData">
                    <svg
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="8056"
                    >
                        <path
                        d="M469.333333 384h85.333334v213.333333h-85.333334z m0 298.666667h85.333334v85.333333h-85.333334z"
                        fill=""
                        p-id="8057"
                        ></path>
                        <path
                        d="M549.717333 108.032c-14.762667-27.904-60.672-27.904-75.434666 0l-384 725.333333A42.624 42.624 0 0 0 128 896h768a42.581333 42.581333 0 0 0 37.674667-62.592L549.717333 108.032zM198.869333 810.666667L512 219.221333 825.130667 810.666667H198.869333z"
                        fill=""
                        p-id="8058"
                        ></path>
                    </svg>
                    {{lang == 'zh' ? '暫無更多': 'No More Data'}}
                </div>
            </vuescroll>
        </div>
    </div>
</template>

<script>
import vuescroll from 'vuescroll';
export default {
    props: {
        // 語言
        lang: {
            default: 'zh' // en 
        },
        // 距離底部觸發自動加載的距離
        autoLoadDistance:{
            default: 10
        },
        // 是否開啓下拉刷新
        isRefresh:{
            default: true
        },
        // 是否開啓上拉加載
        isPushLoad:{
            default: true
        },
        // 數據是否所有加載完成 true爲所有加載完成
        noData:{
            default: false
        },
        // 下拉刷新開始
        refreshStart:{
            default:()=>{}
        },
        // 下拉刷新完成以後
        refreshDeactivate:{
            default:()=>{}
        },
        // 上拉開始
        loadStart:{
            default:()=>{}
        },
        // 上拉完成以後
        loadDeactivate:{
            default:()=>{}
        }
    },
    components:{vuescroll},
    data() {
        const config = {};
        const ops = {
            vuescroll: {
                mode: 'slide',
                pullRefresh: {
                    enable: this.isRefresh
                },
                pushLoad: {
                    enable: this.isPushLoad,
                    auto: true, //是否自動觸發加載
                    autoLoadDistance: this.autoLoadDistance 
                }
            }
        };
        if (this.lang == 'zh') {
            ops.vuescroll.pullRefresh.tips = {
                deactive: '下拉刷新',
                active: '釋放刷新',
                start: '刷新中...',
                beforeDeactive: '刷新成功!'
            };
            ops.vuescroll.pushLoad.tips = {
                deactive: '上拉加載',
                active: '釋放加載',
                start: '加載中...',
                beforeDeactive: '加載成功!'
            };
        }
        return {
            ops,
            config
        };
    },
    methods: {
        
        // 刷新開始
        // vsInstance vm===this
        // refreshDom === 刷新dom 
        handleRS(vsInstance, refreshDom, done) {
            if(this.refreshStart){
                this.refreshStart(done)
            }else{
                this.setDone(done)
            }
        },
        // 刷新完以後
        handleRBD(vm, loadDom, done) {
            if(this.refreshDeactivate){
                this.refreshDeactivate(done)
            }else{
                setTimeout(()=>{
                    this.setDone(done)
                },600)
            }    
        },
        // 上拉開始
        handleLoadStart(vm, dom, done) {
            if(this.loadStart){
                this.loadStart(done)
            }else{
                this.setDone(done)
            }    
        },
        // 上拉完成後
        handleLBD(vm, loadDom, done) {
            if (!this.$parent.noData) {
                if(this.loadDeactivate){
                    this.loadDeactivate(done)
                }else{
                    setTimeout(()=>{
                        this.setDone(done)
                    },600)
                }
            }else{
                setTimeout(()=>{
                    this.setDone(done)
                },600)
            }
        },
        // 手動觸發 外部經過ref觸發
        // type load 爲加載   refresh 爲刷新
        trigger(type='load') {
            this.$refs['vs'].triggerRefreshOrLoad(type);
        },
        setDone(done){
            done()
        }
      }
};
</script>

<style lang="less" scoped>
    .pr-wrap {
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
        .wrap-part {
            height: 100%;
            &.first {
                width: 100%;
            }
        }
    }
</style>

在test.vue 中使用

<template>
    <div class="test">
        <vue-scroll
            :refreshStart='refreshStart'
            :loadStart='loadStart'
            :noData='noData'
        >
            <div class="rl-child child1"></div>
            <div class="rl-child child2"></div>
            <div class="rl-child child3"></div>
        </vue-scroll>
    </div>
</template>

<script>
export default {
    data(){
        return {
            noData:false //判斷是否數據所有加載完成 true爲所有加載完
        }
    },
    methods:{
        // 刷新開始
        refreshStart(done){
            setTimeout(()=>{
                // 這裏寫 ajax 業務請求，在數據請求到後執行 done() 關閉動畫
                done() 
            },1600)
        },
        // 加載開始
        loadStart(done){
            setTimeout(()=>{
                // 這裏寫 ajax 業務請求，在數據請求到後執行 done() 關閉動畫
                done() 
            },1600)
        }
    }
}
</script>

<style lang="less" scoped>
    .rl-child {
        width: 100%;
        height: 500px;
    }
    .child1 {
        width: 100%;
        height: 500px;
        background-color: #43d2c6;
    }
    .child2 {
        background-color: #589be5;
    }
    .child3 {
        background-color: #f3b500;
    }
</style>

完成效果-測試-以及在實際項目鍾使用