Application Development of Up-Load and Down-Drop Refresh Components Based on Vuescroll.js Packaging

What is vuescroll?

Description from the official website: vuescroll Vue.js-based custom scrollbar plug-in, it has two modes: native: suitable for PC side, support basic custom scrollbar. Slide: It is suitable for mobile terminal, supporting pull-down-load, pull-up refresh, rotation, etc. However, this does not mean that the slide mode can only be used on the mobile side, just because the mobile side is more compatible with the slide mode. Don't talk too much nonsense, just go to the code.

install

npm install vuescroll --save

Global registration

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

// You can set up the global configuration here.
Vue.use(vuescroll, {
  ops: {}, // Set the global default configuration here
  name: 'myScroll' // Customize component name here, default is vueScroll
});
/*
 * perhaps
 */
Vue.use(vuescroll); // install the vuescroll first
Vue.prototype.$vuescrollConfig = {
  bar: {
    background: '#000'
  }
};

Partial registration

<template>
  <vuescroll> <!-- Your content... --> </vuescroll>
</template>
<script>
  import vuescroll from 'vuescroll';

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

Locally encapsulated vue-scroll.vue components

<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': 'No More Data'}}
                </div>
            </vuescroll>
        </div>
    </div>
</template>

<script>
import vuescroll from 'vuescroll';
export default {
    props: {
        // language
        lang: {
            default: 'zh' // en 
        },
        // Distance from bottom trigger automatic loading
        autoLoadDistance:{
            default: 10
        },
        // Whether to open drop-down refresh
        isRefresh:{
            default: true
        },
        // Whether to turn on pull-up loading
        isPushLoad:{
            default: true
        },
        // Whether the data is fully loaded, true is fully loaded
        noData:{
            default: false
        },
        // Drop-down refresh start
        refreshStart:{
            default:()=>{}
        },
        // After the drop-down refresh is complete
        refreshDeactivate:{
            default:()=>{}
        },
        // Pull up start
        loadStart:{
            default:()=>{}
        },
        // After the pull-up is completed
        loadDeactivate:{
            default:()=>{}
        }
    },
    components:{vuescroll},
    data() {
        const config = {};
        const ops = {
            vuescroll: {
                mode: 'slide',
                pullRefresh: {
                    enable: this.isRefresh
                },
                pushLoad: {
                    enable: this.isPushLoad,
                    auto: true, //Whether to trigger loading automatically
                    autoLoadDistance: this.autoLoadDistance 
                }
            }
        };
        if (this.lang == 'zh') {
            ops.vuescroll.pullRefresh.tips = {
                deactive: 'Drop-down refresh',
                active: 'Release refresh',
                start: 'Refresh...',
                beforeDeactive: 'Refresh success!'
            };
            ops.vuescroll.pushLoad.tips = {
                deactive: 'Pull up loading',
                active: 'Release loading',
                start: 'Loading...',
                beforeDeactive: 'Load successful!'
            };
        }
        return {
            ops,
            config
        };
    },
    methods: {
        
        // Flashing started
        // vsInstance vm===this
        // refreshDom ==== refresh dom 
        handleRS(vsInstance, refreshDom, done) {
            if(this.refreshStart){
                this.refreshStart(done)
            }else{
                this.setDone(done)
            }
        },
        // After refreshing
        handleRBD(vm, loadDom, done) {
            if(this.refreshDeactivate){
                this.refreshDeactivate(done)
            }else{
                setTimeout(()=>{
                    this.setDone(done)
                },600)
            }    
        },
        // Pull up start
        handleLoadStart(vm, dom, done) {
            if(this.loadStart){
                this.loadStart(done)
            }else{
                this.setDone(done)
            }    
        },
        // After the pull-up is completed
        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)
            }
        },
        // Manual Trigger External Trigger Through ref
        // type load loads refresh loads refresh refreshes
        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>

Use in 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 //Determine whether all data is loaded, true is loaded.
        }
    },
    methods:{
        // Flashing started
        refreshStart(done){
            setTimeout(()=>{
                // Write ajax business request here, and execute done() to close the animation after the data request arrives.
                done() 
            },1600)
        },
        // Load start
        loadStart(done){
            setTimeout(()=>{
                // Write ajax business request here, and execute done() to close the animation after the data request arrives.
                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>

Completion effect - Test - and use in actual project clock

Tags: Javascript Vue Mobile less npm

Posted on Mon, 07 Oct 2019 05:01:19 -0700 by Stuie_b