1.0.0 • Published 5 years ago
vue-slider-tabs v1.0.0
vue-slider-tabs
Intro
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 listloadData
- 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
1.0.0
5 years ago