vue-slide-for-more

    4.2.0 • Public • Published

    vue-slide-for-more

    NPM Version Download Month gzip with dependencies: 1.8kb pkg.module

    pkg.module supported, which means that you can apply tree-shaking in you project

    A vuejs(vue2) component for loading more data when the content was slide to the bottom on mobile, provided refresh function, supported SSR.

    repository

    https://github.com/livelybone/vue-slide-for-more.git

    Demo

    https://livelybone.github.io/vue/vue-slide-for-more/

    Installation

    npm i vue-slide-for-more -S

    Global name

    VueBtn

    Register the component

    // import all
    import {SlideForMore, SlideForMoreBase} from 'vue-slide-for-more';
     
    // import what you just need
    import SlideForMore from 'vue-slide-for-more/lib/umd/SlideForMore';
    // or
    import SlideForMoreBase from 'vue-slide-for-more/lib/umd/SlideForMoreBase';
     
     
    // Global register
    Vue.component('slide-for-more', SlideForMore);
    Vue.component('slide-for-more-base', SlideForMoreBase);
     
    // Local register
    new Vue({
      components:{SlideForMore, SlideForMoreBase}
    })

    Use in html, see what your can use in CDN: unpkg

    <-- use what you want -->
    <script src="https://unpkg.com/vue-slide-for-more/lib/umd/<--module-->.js"></script> 

    Apply

    SlideForMoreBase

    // template
    <template>
        <SlideForMoreBase
            tipHeight="40px"
            :slideValue="100" 
            :isSearching="isSearching">
            <div class="top-tip" slot="topTip">{{isSearching?'正在刷新...':'刷新'}}</div>
            <div v-for="el in list">{{el}}</div>
            <div class="bottom-tip" slot="tip">{{isSearching?'正在查询...':'获取更多'}}</div>
     </SlideForMoreBase>
    </template>

    SlideForMore

    // template. SlideForMore is a simple packaging of SlideForMoreBase
    <template>
        <SlideForMore 
            tipHeight="40px"
            :slideValue="100" 
            :isSearching="false">
            <div v-for="el in list">{{el}}</div>
        </SlideForMore>
    </template>

    Props

    Name Type DefaultValue Description
    tipHeight String 40px Used to set the height of both div.slide-for-more-top-tip-wrap which shows refreshing and div.slide-for-more-tip-wrap which shows loading more
    slideValue Number 100 (px) Used to set min value of slide distance to trigger events
    isSearching Boolean false Used to tell the component whether you are searching or not. If you are searching, it will show the loading text. This is an important prop

    Events

    Name EmittedData Description
    refresh none Event for refresh
    slideDown none An alias of refresh event
    loadMore none Event for load more
    slideUp none An alias of loadMore event

    style

    For building style, you can use the css or scss file in lib directory.

    // scss
    import 'node_modules/vue-slide-for-more/lib/css/index.scss'
     
    // css
    import 'node_modules/vue-slide-for-more/lib/css/index.css'

    Or

    // scss 
    @import 'node_modules/vue-slide-for-more/lib/css/index.scss';
     
    // css 
    @import 'node_modules/vue-slide-for-more/lib/css/index.css';

    Or, you can build your custom style by copying and editing index.scss

    Install

    npm i vue-slide-for-more

    DownloadsWeekly Downloads

    30

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    40.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • livelybone