微信小程序开发实现轮播图

小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家

效果图:

1.页面代码

<!--index.wxml--> <view class="container">     <!--轮播图-->   <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">     <block wx:for-items="{{lunboData}}">       <swiper-item>         <image src="{{item.imgurl}}" class="slide-image" />       </swiper-item>     </block>   </swiper> </view>

2.配置信息

//index.js Page({   data: {     //轮播图配置     autoplay: true,     interval: 3000,     duration: 1200   },   onLoad: function () {     var that = this;      var data = {       "datas": [         {           "id": 1,           "imgurl": "../../images/a1.webp"         },         {           "id": 2,           "imgurl": "../../images/a2.webp"         }       ]     };      that.setData({       lunboData: data.datas     })   } })

3.配置样式

/**index.wxss**/ /*轮播控件*/ .home-swiper {   width: 95%;   height: 360rpx; } .slide-image {   width: 100%;   height: 100%; }

推荐阅读