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


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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
Vue.js的模板语法详解
Feb 16 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
正则表达式语法
2006/10/09 Javascript
基于文本的留言簿
2006/10/09 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python简单实现enum功能的方法
2016/04/25 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
毕业生自我鉴定
2013/11/05 职场文书
美工的岗位职责
2013/11/14 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
跳槽求职信范文
2014/05/26 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
公司董事任命书
2015/09/21 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL