纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

微信小程序服务器获取数据列表渲染 微信小程序开发(一):服务器获取数据列表渲染操作示例

二萌偏   2021-04-22 我要评论

本文实例讲述了微信小程序服务器获取数据列表渲染操作分享给大家供大家参考具体如下:

在实际项目开发中有很多时候前台页面的数据需要后台服务器传递过来而前台需要循环铺值类似如下页面:

请求后台数据:

wx.request({
   url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //请求后台地址
   data: {
    //请求后台的分页数据
    pageNum: that.data.page,
    pageSize: that.data.pageSize
   },
   method: "post",
   success(res) {
    console.log(res.data);
   }
})

后台返回数据类型:

接下来是前台页面铺值在普通网站页面铺值的时候我会用到JS字符串拼接技术将数据拼到页面外面包一层for循环就可以循环铺出这样的列表页面现在在微信小程序中我们可以在wxml里面写一部分js代码将for循环写在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>是我引用的一个组件库此处不用考虑

希望本文所述对大家微信小程序设计有所帮助


相关文章

猜您喜欢

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式