微信小程序: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>
相关推荐
海绵宝宝不喜欢侬4 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
亮子AI5 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
毕设源码-钟学长13 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
nodcloud1 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
项目題供诗2 天前
微信小程序开发教程(八)
微信小程序·小程序
拼图2092 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
Q_Q5110082853 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
海绵宝宝不喜欢侬3 天前
uniapp微信小程序保存海报到手机相册canvas
智能手机·微信小程序·uni-app·canva可画
海绵宝宝不喜欢侬3 天前
【uniapp微信小程序】扫普通链接二维码打开小程序
微信小程序·小程序·uni-app
亮子AI3 天前
【小程序】微信小程序九宫格抽奖动画(完整版)
微信小程序·小程序