怎么用小程序實現輪播圖

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

那個先上效果：

step1:頁面index.wxml代碼

<!-- 輪播 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
    <block wx:for="{{bnrUrl}}" wx:for-index="index" wx:key="index">
        <swiper-item>
            <image src='{{item.image}}' class='u-img-slide' ></image>
        </swiper-item>
    </block>
</swiper>

step2:配置信息也就是index.js

Page({
  data: {
    bnrUrl: [],
  },
  onLoad: function () {
    // 輪播 
    wx.request({
      url: 'https://locally.uieee.com/slides',
      success (res) {
    // console.log(res.data)
      this.setData({
        icons:res.data
      })
   })
})

step3:樣式文件 index.wxss

/* 輪播 */
.u-wrp-bnr {
  width: 100%;
  height: 300rpx;
  display: block;
  position: relative;
  /* top: rpx; */
  background: #f0f0f0;
}
.u-img-slide {
  width: 100%;
  height: inherit; 
  /* 繼承夫類的高 */
}

然后就是wx.require({})中傳遞一個對象，這個對象的屬性分別對應不同的含義

wx.request({
  url: 'test.php', //僅為示例，并非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

下面解釋一下：

url：請求地址，必填
data：請求的參數
method：HTTP 請求方法，默認為get
dataType：返回的數據格式，默認為json
success：接口調用成功的回調函數
fail：接口調用失敗的回調函數
complete：接口調用結束的回調函數（調用成功、失敗都會執行）

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