网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Vue Horizontal的核心是一种超简单的纯vue水平布局,用于零响应的现代响应式Web。这也是一个非常复杂的代码片段文档,其中包含100多种SPA / SSR / SSG友好配方,可满足您的设计需求。
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
}
转载请注明来源:Vue(vue-horizontal)水平滚动条布局组件
本文永久链接地址:https://www.moyouyouw.cn/code/1103.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论