258资源分享网

swiper​滑动面板(又称滑块视图容器，常见的轮播图)

属性名

 

类型

 

默认值

 

说明

 

indicator-dots

 

Boolean

 

false

 

是否显示面板指示点

 

autoplay

 

Boolean

 

false

 

是否自动切换

 

current

 

Number

 

0

 

当前所在页面的index

 

interval

 

Number

 

5000

 

自动切换时间间隔

 

duration

 

Number

 

1000

 

滑动动画时长

 

bindchange

 

EventHandle

   

current改变时会触发change事件，event.detail={current:current}

 

注意：其中只可放置swiper-item组件，其他节点会被自动删除

current改变时会触发change事件，event.detail={current:current} 
注意：其中只可放置swiper-item组件，其他节点会被自动删除

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%

在.wxml文件中设置swiper

设置indicator-dots="true"显示面板指示点，当前页面为第4页，每次页面切换的时间为5000ms，滑动时长1000ms，绑定页面改变触发事件bindChange。页面显示的图片在imgArray数组中，通过wx：for绑定。

 

<swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">

 

<block wx:for="{{imgArray}}">

 

<swiper-item>

 

<image src=http://www.yiyongtong.com/archives/"{{item}}" class="img"></image>

 

</swiper-item>

 

</block>

 

</swiper>

在.wxsss中设置图片的宽度

 

.img{

 

width:100%;

 

}

在.js中设置保存图片的数组imgArray

 

Page({

 

data:{

 

imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',

 

 

 

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',

 

 

 

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',

 

 

 

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']

 

},

 

并执行changeCurren方法

 

changeCurrent:function(){

 

console.log("我滚动了");

 

}

运行结果：

页面此时已经发生滚动，显示第一张图片，底部第一个小圆点颜色变亮。当页面滚动的时候控制台回打印出：我滚动了