Vue的水平滚动条布局– vue-horizontal

Vue的水平滚动条布局– vue-horizontal
插件名称 vue-horizontal
版本号 v0.8.9
发布时间 2020年12月30日
插件作者 fuxingloh

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

特征:

  • 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)

  • 更新资料