微信小程序聯(lián)網(wǎng)請求的輪播圖
微信小程序的輪播圖和Android的輪播圖一點不一樣 ,這里我們看一下我們需要用到的控件介紹

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

接下來就是開啟我們小程序輪播圖之旅了,附上一張效果圖
首先,我們看一下我們的index.wxml文件
<view>
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
<block wx:for="{{images}}">
<swiper-item>
<image src="{{item.picurl}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
index.js文件
var app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//是否顯示指示點 true 顯示 false 不顯示
indicatorDots: true,
//控制方向
vertical: false,
//是否自動切換
autoplay: true,
//自動切換時間間隔
interval: 3000,
//滑動動畫時長
duration: 1000,
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
var that = this
//調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
app.getUserInfo(function (userInfo) {
//更新數(shù)據(jù)
that.setData({
userInfo: userInfo
})
})
//網(wǎng)絡(luò)請求 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 這里就是簡單的控制了一下顯示的樣式
.swiper_box {
width: 100%;
}
swiper-item image {
width: 100%;
display: inline-block;
overflow: hidden;
}
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
- 微信小程序非swiper組件實現(xiàn)的自定義偽3D輪播圖效果示例
- 微信小程序自定義輪播圖
- 微信小程序使用swiper組件實現(xiàn)層疊輪播圖
- 微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
- 微信小程序使用swiper組件實現(xiàn)類3D輪播圖
- 微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
- 微信小程序?qū)崿F(xiàn)下拉刷新和輪播圖效果
- 微信小程序 swiper組件構(gòu)建輪播圖的實例
- 微信小程序?qū)崿F(xiàn)輪播圖效果
- 微信小程序?qū)崙?zhàn)之輪播圖(3)
- 微信小程序 輪播圖swiper詳解及實例(源碼下載)
- 微信小程序 swiper組件輪播圖詳解及實例
- 微信小程序?qū)崿F(xiàn)3D輪播圖效果(非swiper組件)
相關(guān)文章
JS前端實現(xiàn)解除頁面禁止復(fù)制功能方法詳解
這篇文章主要為大家介紹了JS前端實現(xiàn)解除頁面禁止復(fù)制功能方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10
實現(xiàn)基于飛書webhook監(jiān)聽github代碼提交
這篇文章主要為大家介紹了實現(xiàn)基于飛書webhook監(jiān)聽github代碼提交示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01

