轻量级滑块组件– vue-active-swiper

轻量级滑块组件– vue-active-swiper
插件名称 vue-active-swiper
发布时间 2020年6月4日
插件作者 accforgit

Vue的面向移动设备,无依赖项和轻量级滑块器组件。

安装和下载:

# NPM
$ npm install vue-active-swiper --save

导入

全局导入

// 样式引用
import 'vue-active-swiper/dist/VueActiveSwiper.css'

import Vue from 'vue'
import VueActiveSwiper from 'vue-active-swiper'

Vue.use(VueActiveSwiper)

局部导入

// 样式引用
import 'vue-active-swiper/dist/VueActiveSwiper.css'

// in ES6 modules
import { Swiper, SwiperItem } from 'vue-active-swiper'

// in CommonJS
const { Swiper, SwiperItem } = require('vue-active-swiper')

export default {
  components: {
    Swiper,
    SwiperItem
  }
}

script 脚本形式导入

<link rel="stylesheet" href="../node-modules/vue-active-swiper/dist/VueActiveSwiper.css" charset="utf-8">
<script src="../node-modules/vue-active-swiper/dist/VueActiveSwiper.umd.min.js"></script>
const Swiper = VueActiveSwiper.Swiper
const SwiperItem = VueActiveSwiper.SwiperItem

new Vue({
  el: '#app',
  components: {
    Swiper,
    SwiperItem
  }
})

用法

在 Vue组件实例中使用:

<Swiper>
  <SwiperItem>1</SwiperItem>
  <SwiperItem>2</SwiperItem>
  <SwiperItem>3</SwiperItem>
</Swiper>

or

<Swiper :urlList="[
  'https://dummyimage.com/375x100/FB8A80?text=1',
  'https://dummyimage.com/375x100/29A90F?text=2',
  'https://dummyimage.com/375x100/6F9DFF?text=3'
]" />

Options

Props

参数类型描述默认值是否必须
urlListArray传入的图片数组
如果指定了此值,则 Swiper组件传入的 SwiperItem子组件将不起作用,
urlList 与 SwiperItem二选一,如果二者同时存在,优先以 urlList为准
null
backgroundSizeString图片以何种缩放的形式铺在滑动容器框(Swiper)内,取值及效果都与 CSS background-size一致
只有当指定了 urlList 时才有效
cover
clientWNumber滑动容器框(Swiper)的宽度document.documentElement.clientWidth
clientHNumber滑动容器框(Swiper)的宽度200
showCounterBoolean是否需要默认的计数器false
counterStyleObject自定义默认计数器的样式
只有当 showCounter为 true时才有效
null
startIndexNumber起始渲染显示的SwiperItem index0
criticalValueNumber临界点的比例值,当超过此值代表的临界点,则将自动滑动到下一张图片1/3
autoPlayDelayNumber如果指定了此参数,并且值 >= 0,则将会将此值当做 自动轮播delay的时间(单位为 ms)进行自动轮播;不指定则不自动轮播
如果想要指定此值,一般建议设置为 3000
null
durationNumber自动滚动到稳定位置所需的时间,单位是秒(ms)350
noDragWhenSingleBoolean如果只有一个 swipeItem,是否禁止拖动true

Events

事件名描述参数
click整个组件的点击事件(可用于控制组件的显示/隐藏)activeIndex
change每次滚动结束后的回调activeIndex