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


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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
vuex的简单使用教程
Feb 02 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
Smarty安装配置方法
2008/04/10 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
django的model操作汇整详解
2019/07/26 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
python中pyqtgraph知识点总结
2021/01/26 Python
2019年c语言经典面试题目
2016/08/17 面试题
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
挂科检讨书范文
2014/02/20 职场文书
公司授权委托书
2014/04/04 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
党员民主评议总结
2014/10/20 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL