微信小程序開發(fā)怎么實現(xiàn)輪播圖

這篇文章主要講解了“微信小程序開發(fā)怎么實現(xiàn)輪播圖”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序開發(fā)怎么實現(xiàn)輪播圖”吧！

效果圖：

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.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../images/a2.jpg"
        }
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

3.配置樣式

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

感謝各位的閱讀，以上就是“微信小程序開發(fā)怎么實現(xiàn)輪播圖”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對微信小程序開發(fā)怎么實現(xiàn)輪播圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！