帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue(vue-horizontal)水平滚动条布局组件

帝国模板之家 2020-12-29 网页特效 评论

描述:

Vue Horizo​​ntal的核心是一种超简单的纯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
}
不要总是怀疑别人,真诚地接受别人的意见,其实是聪明人的选择。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言