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


Posted in Javascript onJune 01, 2020

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

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

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

请求后台数据:

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>是我引用的一个组件库,此处不用考虑。

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

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

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

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

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

Javascript 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 #Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 #Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 #Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 #Javascript
el-table树形表格表单验证(列表生成序号)
May 31 #Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
给多个地址发邮件的类
2006/10/09 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python正则捕获操作示例
2017/08/19 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
优秀员工自荐书
2013/12/19 职场文书
探矿工程师自荐信
2014/01/24 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
质量保证书格式模板
2015/02/27 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
综合办公室岗位职责
2015/04/11 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
培训后的感想
2015/08/07 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书