快應用 swiper組件

2020-08-06 13:47 更新

概述

滑塊視圖容器

子組件

支持

屬性

支持 通用屬性

名稱 類型 默認值 必填 描述
index <number> ０ 否 當前顯示的子組件索引
autoplay <boolean> false 否 渲染完成后，是否自動進行播放
interval <number> 3000ms 否 自動播放時的時間間隔，單位毫秒
indicator <boolean> true 否 是否啟用 indicator，默認 true
loop 1010+ <boolean> true 否 是否開啟循環(huán)模式，1030及以下版本子組件數量大于 2 時才生效
duration 1040+ <number> - 否 滑動動畫時長(duration默認根據手指的速度動態(tài)計算)
vertical 1040+ <boolean> false 否 滑動方向是否為縱向,縱向時indicator 也為縱向
previousmargin 1040+ <string> 0px 否 前邊距，可用于露出前一項的一小部分，支持單位：px和%
nextmargin 1040+ <string> 0px 否 后邊距，可用于露出后一項的一小部分，支持單位：px和%

備注：previousmargin和nextmargin的總和不應該超過整個swiper大小的1/2，超過部分將會被截取。

樣式

支持 通用樣式

名稱 類型 默認值 必填 描述
indicator-color <color> rgba(0, 0, 0, 0.5) 否 indicator填充顏色
indicator-selected-color <color> #33b4ff 或者 rgb(51, 180, 255) 否 indicator選中時的顏色
indicator-size <length> 20px 否 indicator組件的直徑大小
indicator-[top|left|right|bottom] <length>
<percentage> 		- 否 indicator相對于swiper的位置

事件

支持 通用事件

名稱 參數 描述
change {index:currentIndex} 當前顯示的組件索引變化時觸發(fā)

方法

名稱 參數 描述
swipeTo {index: number(指定位置)} swiper滾動到index位置

swiper   示例代碼

查看 示例代碼


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號