小程序之列表渲染

微信小程序地址：
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