五分钟掌握微信小程序轮播图

企业动态
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了。微信小程序提供swiper组件,官网api提供的swiper滑块视图容器。

微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了。

微信小程序提供swiper组件,官网api提供的swiper滑块视图容器。

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:

  • autoplay 自动播放导致swiper变化;
  • touch 用户划动引起swiper变化;
  • 其他原因将用空字符串表示。

注意:其中只可放置<swiper-item/>组件,否则会导致未定义的行为。

swiper-item

仅可放置在<swiper/>组件中,宽高自动设置为100%。

index.wxss

  1. swiper { 
  2.     height: 421.5rpx; 
  3. swiper-item image { 
  4.     width: 100%; 
  5.     height: 100%; 
  6. .swiper-container{ 
  7.   position: relative
  8. .swiper-container .swiper{ 
  9.   height: 300rpx; 
  10. .swiper-container .swiper .img{ 
  11.   width: 100%; 
  12.   height: 100%; 

index.js

  1. Page({ 
  2.   data: { 
  3.     swiperCurrent: 0, 
  4.     indicatorDots: true
  5.     autoplay: true
  6.     interval: 3000, 
  7.     duration: 800, 
  8.     circular:true
  9.     imgUrls: [ 
  10.       'https://p3.pstatp.com/large/43700001e49d85d3ab52'
  11.       'https://p3.pstatp.com/large/39f600038907bf3b9c96'
  12.       'https://p3.pstatp.com/large/31fa0003ed7228adf421' 
  13.     ], 
  14.     links:[ 
  15.       '../user/user'
  16.       '../user/user'
  17.       '../user/user' 
  18.     ] 
  19.      
  20.   }, 
  21.   //轮播图的切换事件 
  22.   swiperChange: function (e) { 
  23.     this.setData({ 
  24.       swiperCurrent: e.detail.current 
  25.     }) 
  26.   }, 
  27.   //点击指示点切换 
  28.   chuangEvent: function (e) { 
  29.     this.setData({ 
  30.       swiperCurrent: e.currentTarget.id 
  31.     }) 
  32.   }, 
  33.   //点击图片触发事件 
  34.   swipclick: function (e) { 
  35.     console.log(this.data.swiperCurrent); 
  36.     wx.switchTab({ 
  37.       url: this.data.links[this.data.swiperCurrent] 
  38.     }) 
  39.   } 
  40. }) 

index.wxml

  1. <view class="swiper-container"
  2.   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper"
  3.     <block wx:for="{{imgUrls}}" wx:key="unique"
  4.       <swiper-item> 
  5.         <image src="{{item}}" class="img" bindtap="swipclick" /> 
  6.       </swiper-item> 
  7.     </block> 
  8.   </swiper> 
  9. </view

重要一点是图片的点击事件,官网没明确指出。bindtap="swipclick"

  1. swipclick: function (e) { 
  2.     console.log(this.data.swiperCurrent); 
  3.     wx.switchTab({ 
  4.       url: this.data.links[this.data.swiperCurrent] 
  5.     }) 
  6.   } 

效果图

【本文为51CTO专栏作者“洪生鹏”的原创稿件,转载请联系原作者】

戳这里,看该作者更多好文

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2021-06-07 09:51:22

原型模式序列化

2009-11-17 14:50:50

Oracle调优

2009-11-05 10:55:22

Visual Stud

2019-12-23 16:42:44

JavaScript前端开发

2021-01-13 09:23:23

优先队列React二叉堆

2021-01-11 09:33:37

Maven数目项目

2017-01-10 09:07:53

tcpdumpGET请求

2022-08-04 13:27:35

Pythonopenpyxl

2021-10-20 06:58:10

工具低代码无代码

2009-11-16 10:53:30

Oracle Hint

2021-01-29 11:25:57

Python爬山算法函数优化

2021-03-12 09:45:00

Python关联规则算法

2020-12-17 10:00:16

Python协程线程

2019-08-09 10:33:36

开发技能代码

2009-10-22 16:18:19

Oracle表空间

2009-11-05 14:53:54

Visual Stud

2021-10-19 07:27:08

HTTP代理网络

2013-09-17 09:49:29

程序集读懂程序编程

2017-04-25 12:07:51

AndroidWebViewjs

2020-06-16 08:47:53

磁盘
点赞
收藏

51CTO技术栈公众号