vue滑块组件_H5的轻微Vue滑块组件

vue滑块组件

Vue H5雨刷器 (Vue H5 Swiper)

Slight vue slider component for H5 applications.

适用于H5应用程序的轻微vue滑块组件。

View Demo 查看演示 Download Source 下载源

特征 (Features)

• Slight, only has better-scroll dependency.

  轻微，仅具有更好的滚动依赖性。

• Support long content page.

  支持长内容页面。

• A great diversity of paging animations.

  分页动画的多样性。

• Without fake element at loop mode.

  在loop模式下没有伪元素。

• Optimized displayed SwiperItem count.

  优化显示的SwiperItem计数。

演示版 (Demos)

yarn dev

安装 (Installation)

npm install vue-h5-swiper --save

# or use yarn
yarn add vue-h5-swiper

<template>
  <swiper>
    <swiper-item>
      ...
      Content Slot
      ...
    </swiper-item>
  </swiper>
</template>

<script>
import { Swiper, SwiperItem } from 'vue-h5-swiper';

export default {
  components: {
    Swiper,
    SwiperItem
  }
};
</script>

文献资料 (Documentation)

刷牙 (Swiper)

道具 (Props)

Prop	Default	Description
loop	false	Enable loop mode.
show-indicator	true	Display indicators.
page-transition	'move'	Paging animation. Available animations: ['move', 'fade', 'cover', 'carousel', 'scale', 'glue', 'cube', 'push', 'three']
autoplay	false	Auto slide.
interval	3000	Auto slide interval.

Struts	默认	描述
loop	false	启用循环模式。
show-indicator	true	显示指示器。
page-transition	'move'	分页动画。 可用的动画： ['move', 'fade', 'cover', 'carousel', 'scale', 'glue', 'cube', 'push', 'three']
autoplay	false	自动滑动。
interval	3000	自动滑动间隔。

大事记 (Events)

Event	Params	Description
beforeChange	activeIndex, oldIndex	Before paging hook.
afterChange	activeIndex, oldIndex	After paging hook.

事件	参数	描述
beforeChange	activeIndex ， oldIndex	分页之前的钩子。
afterChange	activeIndex ， oldIndex	分页后挂钩。

方法 (Methods)

Method	Description
moveTo(index)	Move to the specified page.
next()	Move to next page.
prev()	Move to previous page.

方法	描述
moveTo(index)	移至指定页面。
next()	移至下一页。
prev()	移至上一页。

插槽 (Slots)

Slot	Description
default---------	For SwiperItem.
indicator-------	Custom swiper indicator.

插槽	描述
默认 - - - - -	对于SwiperItem 。
指示符 - - - -	自定义滑动指示器。

刷卡器 (SwiperItem)

插槽 (Slots)

Slot	Description
default---------	For display content.

插槽	描述
默认 - - - - -	用于显示内容。

翻译自: https://vuejsexamples.com/slight-vue-slider-component-for-h5/

vue滑块组件