微信小程序聯(lián)網(wǎng)請求的輪播圖
微信小程序的輪播圖和Android的輪播圖一點(diǎn)不一樣 ,這里我們看一下我們需要用到的控件介紹
這里我們用到了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: { //是否顯示指示點(diǎn) 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ǐn)?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組件實(shí)現(xiàn)的自定義偽3D輪播圖效果示例
- 微信小程序自定義輪播圖
- 微信小程序使用swiper組件實(shí)現(xiàn)層疊輪播圖
- 微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
- 微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
- 微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
- 微信小程序?qū)崿F(xiàn)下拉刷新和輪播圖效果
- 微信小程序 swiper組件構(gòu)建輪播圖的實(shí)例
- 微信小程序?qū)崿F(xiàn)輪播圖效果
- 微信小程序?qū)崙?zhàn)之輪播圖(3)
- 微信小程序 輪播圖swiper詳解及實(shí)例(源碼下載)
- 微信小程序 swiper組件輪播圖詳解及實(shí)例
- 微信小程序?qū)崿F(xiàn)3D輪播圖效果(非swiper組件)
相關(guān)文章
JS前端實(shí)現(xiàn)解除頁面禁止復(fù)制功能方法詳解
這篇文章主要為大家介紹了JS前端實(shí)現(xiàn)解除頁面禁止復(fù)制功能方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict,嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集,它在語義上與正常的代碼有明顯的差異,下面我們就一起來學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10實(shí)現(xiàn)基于飛書webhook監(jiān)聽github代碼提交
這篇文章主要為大家介紹了實(shí)現(xiàn)基于飛書webhook監(jiān)聽github代碼提交示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01