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


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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
Javascript模块化编程详解
Dec 01 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP空值检测函数与方法汇总
2017/11/19 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
python比较两个列表是否相等的方法
2015/07/28 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python实现最大子序和的方法示例
2019/07/05 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
优秀教师主要事迹
2014/02/01 职场文书
《乌塔》教学反思
2014/02/17 职场文书
取保候审保证书
2014/04/30 职场文书
外联部演讲稿
2014/05/24 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
英文演讲稿开场白
2014/08/25 职场文书
民用住房租房协议书
2014/10/29 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
浅谈Python数学建模之线性规划
2021/06/23 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers