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


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(js)设置默认输入焦点(focus)
Dec 28 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
javascript中new关键字详解
Dec 14 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
网页常用特效代码整理
2006/06/23 Javascript
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
php跨域调用json的例子
2013/11/13 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
python类和继承用法实例
2015/07/07 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python如何定义有默认参数的函数
2020/08/10 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
信息管理员岗位职责
2013/12/01 职场文书
医院工作检讨书范文
2014/02/10 职场文书
阳光体育活动方案
2014/02/16 职场文书
工程师岗位职责规定
2014/02/26 职场文书
《桥》教学反思
2014/04/09 职场文书
意向书范本
2014/07/29 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
小学班主任评语
2014/12/29 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
驻村工作简报
2015/07/20 职场文书
python中sys模块的介绍与实例
2021/04/17 Python