插件名称 | vue-horizontal |
---|---|
版本号 | v0.8.9 |
发布时间 | 2020年12月30日 |
插件作者 | fuxingloh |
这是水平列表组件的升级版本,可帮助开发人员生成水平滚动条以展示所有内容。
1.导入并注册组件。
import VueHorizontal from 'vue-horizontal';
export default {
components: {VueHorizontal}
}
// or
Vue.use(VueHorizontal);
2.将<vue-horizontal>
组件添加到模板。
<vue-horizontal>
</vue-horizontal>
3.将幻灯片添加到滚动条。
<vue-horizontal>
<div class="item">
<h3>Item 1</h3>
<p>As you can see these are just html elements.</p>
</div>
<section>
<h4>Item 2</h4>
</section>
<section>
<h3>Item 3</h3>
</section>
<section v-for="item in items" :key="item.i">
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</section>
<section>
<h3>Last Item</h3>
</section>
</vue-horizontal>
export default {
data() {
return {
items: [...Array(5).keys()].map((i) => {
return {i, title: `v-for: ${i}`, content: `? Paragraph ${i}`};
}),
}
}
}
4.可用的组件道具。
button: {
type: Boolean,
default: () => true,
},
buttonBetween: {
type: Boolean,
default: () => true
},
scroll: {
type: Boolean,
default: () => false,
},
responsive: {
type: Boolean,
default: () => false,
},
/**
* Move window, indicates the percent of width to travel when nav is triggered.
*/
displacement: {
type: Number,
default: () => 1.0
},
/**
* Snap to start|center|end
*/
snap: {
type: String,
default: () => 'start',
},
5. API方法。
// prev item
$refs.horizontal.prev();
// next item
$refs.horizontal.next();
// scroll to an item
$refs.horizontal.scrollToIndex(index);
// scroll to left
$refs.horizontal.scrollToLeft(index);
// refresh the scroller
$refs.horizontal.refresh();
6.活动。
onPrev() {
this.prev += '- clicked prev'
},
onNext() {
this.next += '- clicked next'
}
nScroll(data) {
this.scroll = data
},
onScrollDebounce(data) {
this.scrollDebounce = data
}
# Yarn
$ yarn add vue-horizontal
# NPM
$ npm i vue-horizontal
v0.8.9(04/20/2021)
v0.8.8(02/04/2021)
v0.8.7(01/27/2021)
v0.8.6(01/23/2021)
v0.8.5(01/12/2021)
v0.8.4(01/07/2021)
v0.8.3(01/01/2021)