微信小程序: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>
相关推荐
腾马科技12 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码17 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名20 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风21 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
明天你好2671 天前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
江城开朗的豌豆1 天前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
江城开朗的豌豆1 天前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
Stanford_11061 天前
如何利用Python进行数据分析与可视化的具体操作指南
开发语言·c++·python·微信小程序·微信公众平台·twitter·微信开放平台
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
Terio_my2 天前
微信小程序开发从零基础到项目发布的全流程实战教程(四)
微信小程序·小程序