swiper詳解
滑塊視圖容器。swiper的初始化高度為150px;swiper-item的初始高度和寬度為100%;都可通過css樣式進行swiper、swiper-item的樣式重置。swiper原生組件詳解
swiper組件開發
如何使用
到 GitHub 下載 WX-RUI 的代碼，將 component 目錄拷貝到自己的項目中。然后按照如下的方式使用組件，以 swiper 為例，其它組件在對應的文檔頁查看：
1. 添加需要的組件。在頁面的 json 中配置（路徑根據自己項目位置配置）：
"usingComponents": {
"rui-swiper": "../../component/swiper/swiper"
}
2. 在 wxml 中使用組件：
2.1 常規滑動輪播
<rui-swiper
swiperList="{{bannerList}}"
indicatorDots="true"
autoplay="true"
></rui-swiper>
2.2 銜接滑動輪播(循環滑動輪播)
<rui-swiper
swiperList="{{bannerList}}"
indicatorDots="true"
autoplay="true"
circular="true"
></rui-swiper>
效果圖1 ---- 常規滑動輪播和循環滑動輪播
2.3 縱向滑動輪播
<rui-swiper
swiperList="{{bannerList}}"
indicatorDots="true"
autoplay="true"
vertical="true"
></rui-swiper>
2.4 縱向銜接滑動輪播(縱向循環滑動輪播)
<rui-swiper
swiperList="{{bannerList}}"
indicatorDots="true"
autoplay="true"
circular="true"
vertical="true"
></rui-swiper>
效果圖2 ---- 縱向滑動輪播和縱向循環滑動輪播
2.5 后邊距滑動
<rui-swiper
swiperList="{{bannerList}}"
indicatorDots="true"
autoplay="true"
imgwidth="90vw"
circular="true"
next-margin="30px"
></rui-swiper>
2.6 前后邊距滑動輪播
<rui-swiper
swiperList="{{bannerList}}"
indicatorDots="true"
autoplay="true"
current='{{current}}'
isOpacity="true"
isScale="true"
imgwidth="82vw"
circular="true"
previous-margin="30px"
next-margin="30px"
rui-class="rui-banner-img"
bindswiperfinish='changeFun'
></rui-swiper>
效果圖3 ---- 后邊距滑動和前后邊距滑動輪播
2.7 多圖片滑動輪播
<rui-swiper
swiperList="{{bannerList}}"
circular="true"
autoplay="true"
display-multiple-items="2"
swiperheight="21.333vw"
imgheight="21.333vw"
imgwidth="50vw"
current='0'
></rui-swiper>
2.8 文字滑動導航
<rui-swiper
type="text"
class='rui-active'
swiperList="{{navList}}"
display-multiple-items="4"
swiperheight="12vw"
imgheight="12vw"
previous-margin="10px"
next-margin="10px"
current='{{current_text}}'
circular="true"
imgwidth="calc((100vw - 20px) / 4 - 40px)"
bindswipertap="getIndex"
></rui-swiper>
效果圖4 ---- 多圖片滑動輪播和文字滑動導航效果圖
參數說明
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| swiperwidth | String | '' | swiper的寬度 |
| swiperheight | String | '' | swiper的高度 |
| imgwidth | String | '' | swiper中圖片的寬度 |
| imgheight | String | '' | swiper中圖片的高度 |
| swiperList | Array | [] | swiper的內容數組 |
| interval | Number | 5000 | 自動切換時間間隔 |
| duration | Number | 500 | 滑動動畫時長 |
| displayMultipleItems | Number | 1 | 同時顯示的滑塊數量 |
| current | Number | 0 | 當前所在滑塊的 index |
| currentItemId | String | '' | 當前所在滑塊的 item-id ，不能與 current 被同時指定 |
| indicatorColor | String | '' | 指示點顏色 |
| indicatorActiveColor | String | '' | 當前選中的指示點顏色 |
| previousMargin | String | '0px' | 前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值 |
| nextMargin | String | '0px' | 后邊距，可用於露出后一項的一小部分，接受 px 和 rpx 值 |
| autoplay | Boolean | false | 是否自動切換 |
| circular | Boolean | false | 是否采用銜接滑動 |
| vertical | Boolean | false | 滑動方向是否為縱向 |
| indicatorDots | Boolean | false | 是否顯示面板指示點 |
| isOpacity | Boolean | false | 是否設置圖片透明度 |
| isScale | Boolean | false | 是否設置圖片縮放比例 |
| skipHiddenItemLayout | Boolean | false | 是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息 |
| bindswiperchange | EventHandle | current 改變時會觸發 change 事件，event.detail = {current: current} | |
| bindswiperfinish | EventHandle | 動畫結束時會觸發 animationfinish 事件，event.detail 同上 |
其他
QQ交流群: 264303060
