微信小程序----開發rui-swiper多樣式輪播組件

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 同上