微信小程序中服務(wù)器如何獲取數(shù)據(jù)列表渲染

發(fā)布時(shí)間：2020-07-20 14:26:42 來源：億速云閱讀：281 作者：小豬欄目：web開發(fā)

小編這次要給大家分享的是微信小程序中服務(wù)器如何獲取數(shù)據(jù)列表渲染，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

在實(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ù)類型：

微信小程序中服務(wù)器如何獲取數(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è)組件庫，此處不用考慮。

微信小程序中服務(wù)器如何獲取數(shù)據(jù)列表渲染

看完這篇關(guān)于微信小程序中服務(wù)器如何獲取數(shù)據(jù)列表渲染的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

微信小程序中服務(wù)器如何獲取數(shù)據(jù)列表渲染

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽