uni-app入门:WXML列表渲染与条件渲染

     1.列表渲染
         1.1wx:for
         1.2wx:key
     2.条件渲染
         2.1wx:if
         2.2 hidden

正文

    WXML全称：wexin markup language,微信标签语言，可以理解为web中的html，今天来讲一下列表渲染，通过几个小案例掌握基本的使用，以下均以index页面进行讲解。

1.列表渲染

1.1wx:for

    uniapp中使用wx:for进行列表渲染数据展示，其中默认索引形参为index，索引对应的值的形参默认为item。现自定义数组，然后进行遍历渲染展示。
index.js：

Page({
  data: {
   arr:[1,2,3,4,5]
  }
})
1
2
3
4
5

index.wxml:

<view wx:for="{{arr}}">索引index：{{index}}，值：{{item}}</view>
1

展示数据如下:

    wx:for中的索引项和索引值的形参默认是index、item，是否可以进行自定义，答案是肯定的，现在自定义customIndex、customItem对默认的形参进行修改，需要借助对应的属性:wx:for-index、wx:for-item来实现。上面的数组列表遍历就就可以修改成如下:
index.wxml中:

<view wx:for="{{arr}}" wx:for-index="customIndex" wx:for-item="customItem">
索引index：{{customIndex}}，值：{{customItem}}</view>
1
2

展示效果同上：

1.2wx:key

    上面的列表渲染实现之后，细心的同学可能会在控制台中看到如下警告信息：

    警告的大概意思是需要使用wx:key提高列表渲染的性能,使用wx:key指定每项的唯一标识。至于wx:key的数值一般为列表中唯一的字段值。
    上面的案例customIndex是每一项的唯一标识，所以可以指定wx:key的值为customIndex。修改后的index.wxml如下：

<view wx:for="{{arr}}" wx:for-index="customIndex" wx:for-item="customItem" wx:key="customIndex">
索引index：{{customIndex}}，值：{{customItem}}</view>
1
2

    修改之后结果正常显示，控制台的警告信息也会消失。

2.条件渲染

2.1 wx:if

    wx:if="{{条件表达式}}"，表达式成立则组件显示，不成立则组件不显示。一般也与wx:elif、wx:else进行多条件比较。下面用案例进行说明:
    定义一个数字:num,如果是1则显示男,如果是2则显示女,其他的数显示未知。
index.js中:

Page({
  data: {
   num:1
  }
})
1
2
3
4
5

index.wxml中:

<view wx:if="{{num == 1}}">等于1显示男</view>
<view wx:elif="{{num == 2}}">等于2显示女</view>
<view wx:else>其他显示未知</view>
1
2
3

显示结果如下:

    为了方便调试，修改num值后观察效果，可以直接从appData中修改num值，这样就可以不用频繁修改index.js中num值进行保存了,处理方式如下：

2.2 wx:hidden

    说到控制组件是否显示就不得不说一下hidden属性,hidden值为true时也回控制组件不显示。
index.js中：

Page({
  data: {
   showView: true
  }
})
1
2
3
4
5

index.wxml中：

<view hidden="{{showView}}">是否展示view组件，true时隐藏，false时显示</view>
1

    hidden属性控制组件是否显示是通过添加样式:display: none来实现。可以打开控制台选中组件看下具体的样式信息：

    hidden与wx:if的区别在于前者是添加了样式:display: none,后者是重新创建或是删除对象实现的组件是否显示，从性能上来讲hidden性能更高,不过对于多重条件判断还是使用wx:if比较方便。