美文网首页
小程序之列表渲染

小程序之列表渲染

作者: 奶酪凌 | 来源:发表于2018-04-23 14:29 被阅读0次

微信小程序地址:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

第一,静态列表渲染(按照模仿案例)


静态列表页面.jpg

因为是静态模仿,所以我在js页面的data中建立一个数组prolist,如图


建立数组.jpg 小程序for.jpg

所以,根据上面的数组,修改wxml页面:


for应用.jpg

还有一种情况,我数组中,还存在一个数组,比如说新增一个标签选项(tag)


例子.jpg

我需要在我的数组中新增一行:


tag.jpg

利用wx:for-item:


显示tag.jpg

假如你的数据不是像上面一样是手动输入的,那么,你可以使用:wx.request来引入你需要的数据地址

微信小程序地址:https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject

request.jpg

wxml中的信息不变,就是js里面内容发生变化,从静态的变成读接口信息:


request.jpg

我的理解:
第一步,在data中,新建一个空数组,用来存放接口中的数据,在页面的wx:for中使用;
第二步,onload,在页面打开的同时,加载你新建的prolist方法;
第三步,因为在onload中加载了prolist方法,然后在后面写相应的方法,如:prolist:function(){};wx:request({})成功之后,将数据放入第一步中的数组中

关于this.setData(),一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息。
地址:https://www.cnblogs.com/strong-FE/p/7117945.html

关于wx:key:
微信小程序:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

key.jpg

相关文章

  • 小程序——列表渲染

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变...

  • 小程序-列表渲染

    所谓的列表渲染,就是对于列表数据的展示。其使用场景大多为商品列表页面、购物车页面、收藏列表等页面,应用广泛。微信小...

  • wxml数据绑定,列表渲染,条件渲染

    学习目标 小程序生命周期 wxml数据渲染,列表渲染, 条件渲染 组件事件绑定 (bindtap, bindinp...

  • 微信小程序列表渲染

    1. 指令渲染指令:vx:for每个项目在微信小程序中定好了,都叫item。 2. 微信小程序的列表渲染可以渲染数...

  • 小程序列表渲染

    swiper组件即滑块视图容器,通常用来做轮播图。样子如下: 从官方的代码(这里我就不贴了,大家可以去查阅官方文档...

  • 小程序之列表渲染

    微信小程序地址:https://developers.weixin.qq.com/miniprogram/dev/...

  • 小程序之列表渲染

    实例: //helloworld.wxml {{index}}...

  • 1.3 文章列表界面

    9、列表渲染wx:for 小程序提供了一个wxml组件的for循环,称为列表渲染 9.1.1 将3篇文章的数据提取...

  • 微信小程序-列表渲染

    1.变量声明 在页面js文件中声明要遍历的数组变量 2.语法 在wxml文件的标签中插入 wx:for="{{li...

  • 「小程序JAVA实战」小程序视图之细说列表渲染(14)

    原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!原文链接地址:「小程序JAVA实战」小程序视图之细说列表...

网友评论

      本文标题:小程序之列表渲染

      本文链接:https://www.haomeiwen.com/subject/ffizkftx.html