微信小程序怎么實(shí)現(xiàn)聯(lián)網(wǎng)請(qǐng)求的輪播圖

這篇文章給大家分享的是有關(guān)微信小程序怎么實(shí)現(xiàn)聯(lián)網(wǎng)請(qǐng)求的輪播圖的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比澠池網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式澠池網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋澠池地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

微信小程序的輪播圖和Android的輪播圖一點(diǎn)不一樣 ，這里我們看一下我們需要用到的控件介紹

這里我們用到了swiper這個(gè)組件，上邊的圖片已經(jīng)把這個(gè)組件的屬性 都列出來(lái)了 我們用的時(shí)候直接用就可以了 接下來(lái)，再看一下網(wǎng)絡(luò)請(qǐng)求的API,這里我們用到的是GET 請(qǐng)求，我們開(kāi)一下微信小程序官方給我們的API

接下來(lái)就是開(kāi)啟我們小程序輪播圖之旅了，附上一張效果圖

首先，我們看一下我們的index.wxml文件

index.js文件

var app = getApp()
Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 //是否顯示指示點(diǎn) true 顯示 false 不顯示
 indicatorDots: true,
 //控制方向
 vertical: false,
 //是否自動(dòng)切換
 autoplay: true,
 //自動(dòng)切換時(shí)間間隔
 interval: 3000,
 //滑動(dòng)動(dòng)畫時(shí)長(zhǎng)
 duration: 1000,
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function (options) {
 var that = this
 //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
 app.getUserInfo(function (userInfo) {
  //更新數(shù)據(jù)
  that.setData({
  userInfo: userInfo
  })
 })
 //網(wǎng)絡(luò)請(qǐng)求 GET方法
 wx.request({
  url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
  method: 'GET',
  data: {},
  header: {
  'Accept': 'application/json'
  },
  //成功后的回調(diào)
  success: function (res) {
  console.log('11111' + res),
   that.setData({
   images: res.data
   })
  }
 })
 }
})

index.wxss 這里就是簡(jiǎn)單的控制了一下顯示的樣式

.swiper_box {
 width: 100%;
}

swiper-item image {
 width: 100%;
 display: inline-block;
 overflow: hidden;
}

感謝各位的閱讀！關(guān)于“微信小程序怎么實(shí)現(xiàn)聯(lián)網(wǎng)請(qǐng)求的輪播圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站名稱：微信小程序怎么實(shí)現(xiàn)聯(lián)網(wǎng)請(qǐng)求的輪播圖
本文URL：http://m.jiaotiyi.com/article/gdhgpp.html