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