这是水平列表组件的升级版本，可帮助开发人员生成水平滚动条以展示所有内容。

特征：

• SSR / SSG / SPA：支持所有渲染模式
• 移动和响应式网络友好
• 滚动条或可自定义的按钮导航
• 滚动时对齐到最近的项目
• 将CSS的职责移交给用户
• 可扩展到任何用例，并包含一系列配方
• 在所有主流浏览器上进行端到端测试，代码合并了240多个测试用例

如何使用它：

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）

• chore：重构插槽以使用ref.children

v0.8.6（01/23/2021）

• 修复： v-hl-responsive 的最后一个孩子错误的父类

v0.8.5（01/12/2021）

• 修复：删除容器中最后一个孩子的边距

v0.8.4（01/07/2021）

• 修复：清空内容时防止内容崩溃

v0.8.3（01/01/2021）

• 更新资料

---

官网：https://github.com/fuxingloh/vue-horizontal

演示：https://www.vue365.cn/code_demo.php?id=3687

GitHub下载：https://github.com/fuxingloh/vue-horizontal/archive/main.zip