微信小程序聯(lián)網(wǎng)請(qǐng)求的輪播圖
微信小程序的輪播圖和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文件
<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({ /** * 頁(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)畫(huà)時(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; }
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
- 微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果示例
- 微信小程序自定義輪播圖
- 微信小程序使用swiper組件實(shí)現(xiàn)層疊輪播圖
- 微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
- 微信小程序使用swiper組件實(shí)現(xiàn)類(lèi)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)解除頁(yè)面禁止復(fù)制功能方法詳解
這篇文章主要為大家介紹了JS前端實(shí)現(xiàn)解除頁(yè)面禁止復(fù)制功能方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Three.js引用和環(huán)境搭建過(guò)程詳解
這篇文章主要為大家介紹了Three.js引用和環(huán)境搭建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict,嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集,它在語(yǔ)義上與正常的代碼有明顯的差異,下面我們就一起來(lái)學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10實(shí)現(xiàn)基于飛書(shū)webhook監(jiān)聽(tīng)github代碼提交
這篇文章主要為大家介紹了實(shí)現(xiàn)基于飛書(shū)webhook監(jiān)聽(tīng)github代碼提交示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01