微信小程序学习笔记 ( 小程序页面学习 六 WXML-列表渲染 基本食用方法)

视图层

  框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
  将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
  WXML(WeiXin Markup language) 用于描述页面的结构。
  WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  组件(Component)是视图的基本组成单元。

WXML能力

列表渲染

在前面我们在介绍数组时演示了列表,在这一章我们会更加详细的来查看

1. wx:for

在组件上使用wx:for 来绑定数组, 之后我们就可以使用数组中的数据来重复渲染该组件,
默认数组的下标名为 index, 数组当前项的变量名默认为 item
而我们可以通过 wx:for-item 和 wx:for-index 来决定数组中当前元素的当前的变量名,和下标的变量名 ,我们做个测试
index.wxml

<view wx:for="{
   
   {
   
   array.arrays}}" 
    wx:for-index="i" wx:for-item="obj">
        {
   
   {
   
   i}} : {
   
   {
   
   obj.msg}}
</view>

index.js 的data域部分

array: {
      arrays: [{
        id: "1",
        msg: "foo"
      }, {
        id: "2",
        msg: "bar"
      }]
    }

运行效果 :

当然wx:for 可以嵌套,但是建议使用wx:for-index指定下标名,方便我们使用

2. block wx:for

指我们可以将 wx:for 用在 block标签上, 以渲染一个包含多个节点的结构块

这么说似乎看不出为什么用这个,假如以后我们要做一个外卖的小程序, 我们如何显现我们的每一个菜,我们肯定要做好看,假如要是做的难看,我估计菜再好吃,再优惠估计用的人也不多, 而且人也很容易被抢走,是吧,那么我们如何去定制呢, 这个时候women有两种方法 第一种是使用 模板 template ,第二种就是使用这个,其实用多了我们会发现写着其实都差不多,但是具体的区别我也不知道,比如运行速度占用资源什么的

我们将上面的优化下,并将 id 加入
index.wxml

<block  wx:for="{
   
   {
   
   array.arra