0.2.0 • Published 5 years ago

@mu-ui/mu-swipe v0.2.0

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

mu-swipe 轮播

安装方式

yarn add @mu-ui/mu-swipe

使用指南

import { Swipe, SwipeItem } from '@mu-ui/mu-swipe'

Vue.component('Swipe', Swipe)
Vue.component('SwipeItem', SwipeItem)

<Swipe :loop="false" @change="change">
  <SwipeItem v-for="n in list" :key="n" :style="{'background-color': n}">
    第一屏{{ n }}
  </SwipeItem>
  <div slot="indicator">
    {{ current + 1 }} / {{ list.length }}
  </div>
</Swipe>

export default {
  data() {
    return {
      list: ['red', 'blue', 'green'],
      current: 0
    }
  },
  methods: {
    change(index) {
      this.current = index
    }
  }
}

mu-swipe Props

参数说明类型默认值
loop循环播放Booleantrue
showIndicator是否展示指示器Booleantrue
indicatorColor指示器选中颜色String#fff
duration滑动过渡时间Number500
autoplay自动播放时间间隔Number3000

mu-swipe Slots

名称说明
indicator自定义指示器

mu-swipe Events

名称说明
change返回当前页码下标