|注册
打印/下载
VueAPP
组件
Inc模块
Plus模块
Ui模块
小程序
Vue案例
参数

引入

import wmSwipe from '@/components/swipe'
import wmSwipeItem from '@/components/swipe/item'

Html

<wm-swipe class="swipe">
  <wm-swipe-item class="swipe_item">Page1</wm-swipe-item>
  <wm-swipe-item class="swipe_item">Page2</wm-swipe-item>
  <wm-swipe-item class="swipe_item">Page3</wm-swipe-item>
</wm-swipe>

Css

.swipe{width: 100%; height: 40vmin; background-color: #F2F4F8;}
.swipe_item{height: 100%; line-height: 40vmin; text-align: center;}

JavaScript

import WmSwipe from '@/components/swipe'
import WmSwipeItem from '@/components/swipe/item'

export default {
  components: {WmSwipe,WmSwipeItem},
}

属性

direction {String}

切换方向, 默认: 'horizontal'

  • horizontal //水平
  • vertical //垂直

slide {Object}

动画配置

  • loop: true, //是否循环
  • autoplay: true, //自动切换
  • interval: 3000, //播放间隔
  • speed: 400, //动画时长

isPage {Boolean}

显示分页, 默认: true

pageColor {String}

分页颜色, 默认: 'rgba(0,0,0,.2)'

pageColorActive {String}

分页颜色-选中状态, 默认: '#6FB737'

方法

getNum()

获取翻页数量

prePage()

上一页

nextPage()

下一页

goToPage(x,y,time)

跳转

  • x {Number} : 横向滚动到对应索引, 从 0 开始
  • y {Number} : 纵向滚动到对应索引, 从 0 开始
  • time {Number} : 动画时长, 默认: 400
{{copy}}