Nadie Programa más

    vue-slider-tabs

    1.0.0 • Public • Published

    vue-slider-tabs

    Intro

    a loading data tabs plugin for Vue.js, to help you to use tabs to load data and infinite scroll. it can cache the tab data and remember the scroll height so that you can avoid repeatedly load your data.

    GitHub

    Features

    • mobile friendly
    • each tab infinite scroll supported
    • tab data cached

    Usage & Guide

    install

    npm install vue-slider-tabs

    import with npm or window

    // npm import
    import swipperTabs from './swipperTabs.vue'
    // window import
    <scirpt src="dist/vue-slider-tabs.js"></script>
    // global use
    Vue.use(swipperTabs)
      // component use
    components: {
      swipperTabs
    }

    usage

    <swipper-tabs
      :tabs="tabs"
      :tabCurIdx="tabCurIdx"
      @tabClick="tabClickHandler"
      @loadData="loadDataHandler">
      <!-- slot for tab content -->
        <ul>
          <li v-for="item in list"></li>
        </ul>
      </div>
    </swipper-tabs>

    params

    • tabs - [Array tab names. eg: ['all', 'girl', 'food'], empty Array can hide the tabs, suitable for the no tabs just infinite loading data.
    • tabCurIdx - [Number] init active tab index.
    • tabClick - [Function(cachelist)] tab click handler, cachelist params is the click tab cache page data list
    • loadData - [Function(page, activeIdx, tabName, list, $state)] tab data load hook handler; swipperTabs inner use “vue-infinite-loading” to infinite load data , whenerver need to loading data it will trigger loadData callback to emit to swipperTabs,so you need to handle your own http request in the loadData Function.

    $state: whenerver you loaded your data, you need to use the $state params to stop the inifinite loading status and pass on the loaded datas to the $state callback to cache the list. $state.loaded(data): to stop the current page load, $state.complete(data): means you load all the pages data, $state.error(): when error happend during the load,for more useage please consult the vue-infinite-loading github.

    loadData (loadParams) {
      this.$http.get(url)
        .then(list) {
          if (list && list.length) {
            // render your list
            this.list = this.list.concat(list)
            // change the loading status, data as params to add as the cache list
            loadParams.$state.loaded(list)
          } else { // all data loaded
            loadParams.$state.complete(list)
          }
        }
        .catch(err) {
          loadParams.$state.error()
        }
    }

    Author

    luoliqiang

    Install

    npm i vue-slider-tabs

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    181 kB

    Total Files

    8

    Last publish

    Collaborators

    • luoliqiang