swiper(轮播)
当然这里有一些常用的属性例如:
·indicator-dots 解释:是否显示面板指示点
·autoplay 解释:是否自动切换
·interval 解释:自动切换时间间隔
·circular 解释:是否采用衔接滑动
·duration(可不设置,默认值为500ms) 解释:滑动动画时长
一般在真正开发的时候轮播的效果会把上面的几个经常用的属性结合到一起用,下面我会把这几个常用的属性写到一起,来解释:
1.带有circular属性的演示
wxml:
<swiperindicator-dots="true"autoplay="true"interval="1000"circular="true"duration="600"><swiper-item><viewclass="lqj1"></view></swiper-item><swiper-item><viewclass="lqj2"></view></swiper-item><swiper-item><viewclass="lqj3"></view></swiper-item></swiper>
wxss:
.lqj1{ background-color: red; width: 100%; height: 600rpx; } .lqj2{ background-color: blue; width: 100%; height: 600rpx; } .lqj3{ background-color: chartreuse; width: 100%; height: 600rpx; }
效果展示:
2.不带circular属性的演示
wxml:
<swiperindicator-dots="true"autoplay="true"interval="1000"duration="600"><swiper-item><viewclass="lqj1"></view></swiper-item><swiper-item><viewclass="lqj2"></view></swiper-item><swiper-item><viewclass="lqj3"></view></swiper-item></swiper>
wxss:
.lqj1{ background-color: red; width: 100%; height: 600rpx; } .lqj2{ background-color: blue; width: 100%; height: 600rpx; } .lqj3{ background-color: chartreuse; width: 100%; height: 600rpx; }
效果显示:
由以上两个演示我们可以看出什么不同?
答案:1.的演示结果在显示到最后一个蓝色轮播块的时候后快速往前轮播到第一张红色轮播块,然后再一次的重复轮播
2.的演示结果在显示到最后一个蓝色轮播块的时候,"很丝滑"的进入另一轮重复轮播
这也是·circular ——是否采用衔接滑动起到的效果!
注意到wxml里面的结构了吗?
要想实现一个轮播的效果,我们采用的组件之间嵌套的方式:
<swiper><swiper-item>要显示的内容(图片或其他)</swiper-item></swiper>