|
|
|
|
移动端
创建专栏

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

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

作者:洪生鹏|2018-01-08 16:19

【新品产上线啦】51CTO播客,随时随地,碎片化学习

微信小程序轮播图实现,比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专栏作者“洪生鹏”的原创稿件,转载请联系原作者】

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

【编辑推荐】

  1. 微信月活9亿的高效运维之路
  2. 2018,程序员做好这11件事,必拿高薪!
  3. 别@微信团队了,我用Python给自己戴上了圣诞帽!
  4. 程序员要面对的不仅是代码,还有文档
  5. 毕业五年,一位IT外包女程序员的心酸史和无奈
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多