Vue（vue-horizontal）水平滚动条布局组件

演示  website 下载

描述：

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
}