swiper滑塊視圖容器
swiper滑塊視圖容器用來在指定區(qū)域內(nèi)切換內(nèi)容的顯示，常用于制作海報(bào)輪播圖效果和頁(yè)簽內(nèi)容的切換效果，它的屬性如下
| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點(diǎn)顏色 | 1.1.0 |
| indicator-active-color | Color | #000000 | 當(dāng)前選中的指示點(diǎn)顏色 | 1.1.0 |
| autoplay | Boolean | false | 是否自動(dòng)切換 | |
| current | Number | 0 | 當(dāng)前所在滑塊的 index | |
| current-item-id | String | "" | 當(dāng)前所在滑塊的 item-id ，不能與 current 被同時(shí)指定 | 1.9.0 |
| interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 | |
| duration | Number | 500 | 滑動(dòng)動(dòng)畫時(shí)長(zhǎng) | |
| circular | Boolean | false | 是否采用銜接滑動(dòng) | |
| vertical | Boolean | false | 滑動(dòng)方向是否為縱向 | |
| previous-margin | String | "0px" | 前邊距，可用于露出前一項(xiàng)的一小部分，接受 px 和 rpx 值 | 1.9.0 |
| next-margin | String | "0px" | 后邊距，可用于露出后一項(xiàng)的一小部分，接受 px 和 rpx 值 | 1.9.0 |
| display-multiple-items | Number | 1 | 同時(shí)顯示的滑塊數(shù)量 | [1.9.0] |
效果如圖
wxml文件
<!--pages/one/one.wxml-->
<view class='haibao'>
<swiper
indicator-dots='{{indicationDots}}'
autoplay='{{autoplay}}'
interval='{{interval}}'
duration='{{duration}}'
circular='{{circular}}' >
<block wx:for="{{imgurls}}" wx:key="key">
<swiper-item>
<image src="{{item}}" class="side-image" style="width:100%"></image>
</swiper-item>
</block>
</swiper>
</view>
js文件
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
indicationDots:true,
autoplay:true,
interval:5000,
duration:1000,
circular:true,
imgurls:["../images/1.jpg","../images/2.jpg","../images/3.jpg"]
},
