微信小程序開發(fā)(一):服務器獲取數(shù)據(jù)列表渲染操作示例
本文實例講述了微信小程序服務器獲取數(shù)據(jù)列表渲染操作。分享給大家供大家參考,具體如下:
在實際項目開發(fā)中,有很多時候,前臺頁面的數(shù)據(jù)需要后臺服務器傳遞過來。而前臺需要循環(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ù)據(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>
是我引用的一個組件庫,此處不用考慮。
希望本文所述對大家微信小程序設計有所幫助。
相關文章
JavaScript中callee和caller的區(qū)別與用法實例分析
這篇文章主要介紹了JavaScript中callee和caller的區(qū)別與用法,結合實例形式分析了javascript中callee和caller的功能、區(qū)別、用法及操作注意事項,需要的朋友可以參考下2019-06-06javascript 獲取所有id中包含某關鍵字的控件的實現(xiàn)代碼
獲取某容器控件中id包含某字符串的控件id列表2010-11-11Code:loadScript( )加載js的功能函數(shù)
Code:loadScript( )加載js的功能函數(shù)...2007-02-02