微信小程序:7.页面渲染

wx:if

在小程序中,使用wx:if="{{ condition }}"来判断是否需要渲染该代码块

<view wx:if="{{condation}}">你好帅</view>

也可以用wx:if和wx:else来添加else判断:

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 2}}">保密</view>

结合使用wx:if

如果要一次性控制多个组件的展示和隐藏,可以使用一个**标签**将多个组件包装起来,并在标签上使用wx:if控制属性,示例如下:

<block wx:if="{{false}}">
  <view wx:if="{{type === 1}}">男</view>
  <view wx:elif="{{type === 2}}">女</view>
  <view wx:else="{{type === 2}}">保密</view>
</block>

注意:block并不是一个组件,他只是i一个包裹性质的容器,不会在页面有任何渲染。

hidden

在小程序中,直接使用hidden="{{condition}}" 也可以控制元素的显示和隐藏:

<view hidden="{{flag}}">条件为true 隐藏,条件为false显示</view>

等于true隐藏元素,值为false隐藏元素

wx:if 与 hidden的对比

  1. 运行方式不同wx:if是进行dom的移除进行显示隐藏操作
  2. hidden是设置display:none,控制元素的显示和隐藏

使用建议:在频繁切换的时候,使用hidden
控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else进行展示和隐藏

列表的渲染

wx:for

通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:

<view wx:for="{{lists}}">
{{index}}.{{item}}
</view>

手动指定当和当前项变量名

使用:wx:for-index可以指定当前循环项的索引的变量名

使用:wx:for-item可以指定当前项的变量名

<view wx:for="{{lists}}" wx:for-index="idx" wx:for-item="itemName">
  索引是:{{idx}} 当前项是:{{itemName}}
</view>

wx:key 的使用

类似于Vue列表渲染中的Key,小程序在实现列表渲染的时候,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下:

<view wx:for="{{lists}}" wx:key="index">
{{item}} 
</view>
相关推荐
丁总学Java6 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
mosen8687 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165028 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
小飞哥liac17 小时前
微信小程序的组件
微信小程序
stormjun19 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Bessie23421 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong21 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
1 天前
微信小程序运营日记(第四天)
微信小程序·小程序
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
一只不会编程的猫2 天前
微信小程序配置
微信小程序·小程序