微信小程序開發(fā)（一）：服務(wù)器獲取數(shù)據(jù)列表渲染操作示例
更新時(shí)間：2020年06月01日 09:17:47 作者：二萌偏
這篇文章主要介紹了微信小程序開發(fā)服務(wù)器獲取數(shù)據(jù)列表渲染操作,結(jié)合實(shí)例形式分析了微信小程序后臺(tái)獲取服務(wù)器數(shù)據(jù)及前臺(tái)列表渲染相關(guān)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序服務(wù)器獲取數(shù)據(jù)列表渲染操作。分享給大家供大家參考，具體如下：
在實(shí)際項(xiàng)目開發(fā)中，有很多時(shí)候，前臺(tái)頁面的數(shù)據(jù)需要后臺(tái)服務(wù)器傳遞過來。而前臺(tái)需要循環(huán)鋪值，類似如下頁面：
請(qǐng)求后臺(tái)數(shù)據(jù)：
wx.request({
url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //請(qǐng)求后臺(tái)地址
data: {
//請(qǐng)求后臺(tái)的分頁數(shù)據(jù)
pageNum: that.data.page,
pageSize: that.data.pageSize
},
method: "post",
success(res) {
console.log(res.data);
}
})
后臺(tái)返回?cái)?shù)據(jù)類型：
接下來是前臺(tái)頁面鋪值，在普通網(wǎng)站頁面鋪值的時(shí)候我會(huì)用到JS字符串拼接技術(shù)，將數(shù)據(jù)拼到頁面，外面包一層for循環(huán)就可以循環(huán)鋪出這樣的列表頁面?，F(xiàn)在在微信小程序中，我們可以在wxml里面寫一部分js代碼，將for循環(huán)寫在wxml中：
<view bindtap="jumpPages"
wx:for="{{contentlist}}"
wx:key="{{index}}"
wx:for-index="index"
wx:for-item="item"
>
<van-card
num=" {{item.prjcount}}人 "
price="課程小組"
title="{{item.project_name}}"
desc="{{item.name}}"
centered=true
currency=""
custom-class="custom-g"
thumb-class="thumb"
title-class="title-g"
desc-class="desc-g"
>
</van-card>
</view>
注釋：代碼中的<van-card>是我引用的一個(gè)組件庫，此處不用考慮。
希望本文所述對(duì)大家微信小程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序獲取音頻時(shí)長(zhǎng)與實(shí)時(shí)獲取播放進(jìn)度問題
這篇文章主要介紹了微信小程序獲取音頻時(shí)長(zhǎng)與實(shí)時(shí)獲取播放進(jìn)度,文中給大家通過一個(gè)例子介紹了微信小程序音頻長(zhǎng)度獲取的問題，感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了js實(shí)現(xiàn)的二分查找算法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript簡(jiǎn)單實(shí)現(xiàn)二分查找算法的運(yùn)算原理與具體步驟,需要的朋友可以參考下2016-01-01
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
在WEB程序開發(fā)中經(jīng)常會(huì)見到用倒計(jì)時(shí)限制用戶對(duì)表單的操作，希望用戶在規(guī)定的時(shí)間內(nèi)閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作，本文通過兩種場(chǎng)景分析js實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用，小伙伴快來學(xué)習(xí)吧2015-08-08
前后臺(tái)用js傳參過程中，如果是中文就容易出現(xiàn)亂碼，所以最好是先編碼。2010-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之淘寶分類入口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序日期時(shí)分組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
js利用Array.splice實(shí)現(xiàn)Array的insert/remove
從一個(gè)數(shù)組中移除一個(gè)或多個(gè)元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。2009-01-01
小圖整合在一張大圖里，然后在不同的CSS里調(diào)用同一張圖片，以此來減少請(qǐng)求數(shù)，這是頁面優(yōu)化最常用的手段，但I(xiàn)E6會(huì)對(duì)頁面里同一個(gè)圖片，只要在不同的地方有引用到就會(huì)重新請(qǐng)求一次，需要加JS代碼解決。2010-07-07
javascript面向?qū)ο蟀b類Class封裝類庫剖析
一個(gè)從來沒有接觸過javascript的技術(shù)人員，幾小時(shí)內(nèi)就可以寫出一個(gè)簡(jiǎn)單有用的程序代碼;想寫出高性能的代碼，同樣需要具備一個(gè)高級(jí)程序員的基本素養(yǎng),javascript也是如此2013-01-01
微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序+mqtt,esp8266溫濕度讀取的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04