Vuescroll.jsパッケージに基づいて荷重を引張り、プルダウンリフレッシュ組立品の実際の応用開発を行う.

何がvuescrollですか
公式サイトからの説明:vuescrollはVue.jsカスタムスクロールバーに基づくプラグインで、2つのモードがあります.native:PC端末に適用し、基本的なカスタムスクロールバーをサポートします.slade:移動端に適用されます.プルダウン-ローディング、リフトアップリフレッシュ、ロードショーなどをサポートします.しかし、これは、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'
  }
};

ローカル登録

  import vuescroll from 'vuescroll';

  export default {
    components: {
      vuescroll
    }
  };

ローカルパッケージvue-scroll.vueコンポーネント

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()
        }
      }
};

test.vueで使う

export default {
    data(){
        return {
            noData:false //             true      
        }
    },
    methods:{
        //     
        refreshStart(done){
            setTimeout(()=>{
                //     ajax     ，          done()     
                done() 
            },1600)
        },
        //     
        loadStart(done){
            setTimeout(()=>{
                //     ajax     ，          done()     
                done() 
            },1600)
        }
    }
}

完成効果-テスト-および実際のプロジェクトの鐘で使用します.