小程序模板网

微信小程序的视图容器—swiper

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绑定。

 

				
  1. <swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">
  2.  
  3. <block wx:for="{{imgArray}}">
  4.  
  5. <swiper-item>
  6.  
  7. <image src="{{item}}" class="img"></image>
  8.  
  9. </swiper-item>
  10.  
  11. </block>
  12.  
  13. </swiper>

在.wxsss中设置图片的宽度

 

				
  1. .img{
  2.  
  3. width:100%;
  4.  
  5. }

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

 

				
  1. Page({
  2.  
  3. data:{
  4.  
  5. imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',
  6.  
  7.  
  8.  
  9. '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',
  10.  
  11.  
  12.  
  13. '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',
  14.  
  15.  
  16.  
  17. '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']
  18.  
  19. },
  20.  
  21. 并执行changeCurren方法
  22.  
  23. changeCurrent:function(){
  24.  
  25. console.log("我滚动了");
  26.  
  27. }

运行结果:

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23688.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询