這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)聯(lián)網(wǎng)請求的輪播圖,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于網(wǎng)站制作、成都網(wǎng)站制作、黃石港網(wǎng)絡(luò)推廣、微信小程序、黃石港網(wǎng)絡(luò)營銷、黃石港企業(yè)策劃、黃石港品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供黃石港建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:bm7419.com
微信小程序的輪播圖和Android的輪播圖一點(diǎn)不一樣 ,這里我們看一下我們需要用到的控件介紹
這里我們用到了swiper這個(gè)組件,上邊的圖片已經(jīng)把這個(gè)組件的屬性 都列出來了 我們用的時(shí)候直接用就可以了 接下來,再看一下網(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, //是否自動(dòng)切換 autoplay: true, //自動(dòng)切換時(shí)間間隔 interval: 3000, //滑動(dòng)動(dòng)畫時(shí)長 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; }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序如何實(shí)現(xiàn)聯(lián)網(wǎng)請求的輪播圖”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
分享題目:微信小程序如何實(shí)現(xiàn)聯(lián)網(wǎng)請求的輪播圖
URL標(biāo)題:http://bm7419.com/article6/iehhog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、關(guān)鍵詞優(yōu)化、網(wǎng)站營銷、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)