WXML模板语法-条件与列表渲染

这篇具有很好参考价值的文章主要介绍了WXML模板语法-条件与列表渲染。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

wx:if

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

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

<!--pages/ifIndex/ifindex.wxml-->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

结合<block>使用wx:if

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

注意: <block> 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。

示例如下,条件为真则渲染:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

条件为假不渲染

WXML模板语法-条件与列表渲染,微信小程序开发,apache

 hidden

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


<view hidden="{{flag}}">条件为true的时候隐藏元素,否责显示</view>

在js文件中data设置一个flag值

// pages/ifIndex/ifindex.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag:true
  }
})

WXML模板语法-条件与列表渲染,微信小程序开发,apache 

wx:if 与 hidden 的对比

① 运行方式不同

  •  wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏

WXML模板语法-条件与列表渲染,微信小程序开发,apache

WXML模板语法-条件与列表渲染,微信小程序开发,apache

  • hidden 以切换样式的方式( display: none/block; ),控制元素的显示与隐藏

WXML模板语法-条件与列表渲染,微信小程序开发,apache

② 使用建议

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

列表渲染

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr1 : [
      "apple","huawei","xiaomi"
    ]
  }
})
<view wx:for="{{arr1}}">
索引是:{{index}},item是:{{item}}
</view>

WXML模板语法-条件与列表渲染,微信小程序开发,apache

默认情况下,当前循环项的索引用 index 表示;当前循环项用 item 表示。

手动指定索引和当前项的变量名(了解)

  • 使用 wx:for-index 可以指定当前循环项的索引的变量名
  • 使用 wx:for-item 可以指定当前项的变量名
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemname">
索引是:{{idx}},item是:{{itemname}}
</view>

WXML模板语法-条件与列表渲染,微信小程序开发,apache 

wx:key 的使用

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

添加一个数组数据:

// pages/ifIndex/ifindex.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr1 : [
      "apple","huawei","xiaomi"
    ],
    userList : [
      {id:1,name:"小红"},
      {id:2,name:"小明"},
      {id:3,name:"小白"}
    ]
  }
})

WXML模板语法-条件与列表渲染,微信小程序开发,apache 

注意:如不提供 wx:key,会报一个 warning,从上图可以看出,警告中告诉我们可以提供一个wx:key来提高渲染效率, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。 

下面内容贴自原文链接:https://blog.csdn.net/qq_69891466/article/details/131605236

wx:key一般是用在wx:for或者其他需要动态渲染的地方,采用wx:key可以对渲染列表中的元素给定唯一标识,使当我们的数组发生改变时,渲染中的原数据可以保持自己的特性。

举个例子,现在有个点击按钮勾选的例子,当我们勾选羔羊排骨一条,点击增加数据后,羔羊排骨左侧的被选中状态按理来说是应该一直跟随羔羊排骨的,但是我们可以发现被选中按钮并没有跟随羔羊排骨变化,而是哪个数据是第一个哪个数据就是被选中状态,这就是因为我们在写for循环时没有添加wx:key没有给定数据一个唯一的标识导致算法无法固定原有数据的渲染。
WXML模板语法-条件与列表渲染,微信小程序开发,apache

当我们采用wx:key之后,原数据的渲染状态就不会改变了

WXML模板语法-条件与列表渲染,微信小程序开发,apache
                        文章来源地址https://www.toymoban.com/news/detail-851763.html

到了这里,关于WXML模板语法-条件与列表渲染的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发---条件渲染和列表渲染

    目录 一、条件渲染 (1)基本使用  (2)block (3)hidden 二、列表渲染 (1)基本使用 (2)手动指定索引和当前项的变量名 (3)wx:key的使用 条件渲染就相当于if语句,这也不需要多说了,终点是它的用法。 如果想要一次性控制多个组件的展示和隐藏,可以使用block标签将多

    2024年02月09日
    浏览(52)
  • 微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月10日
    浏览(63)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(71)
  • 微信小程序开发学习笔记——3.4for循环列表渲染的用法

    跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。 课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=18vd_source=9b149469177ab5fdc47515e14cf3cf74 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html data.js文件的data部分:  data.wxml文件中添加如下代码:

    2024年02月22日
    浏览(72)
  • 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月01日
    浏览(40)
  • React【React是什么?、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

           React是什么? 为什么要学习React  React开发前准备  创建React项目 

    2024年02月11日
    浏览(53)
  • [golang gin框架] 26.Gin 商城项目-前台自定义商品列表模板, 商品详情数据渲染,Markdown语法使用

    当在首页分类点击进入分类商品列表页面时,可以根据后台分类中的分类模板跳转到对应的模板商品列表页面 (1).商品控制器方法Category()完善 修改controllers/frontend/productController.go中的方法Category(), 判断分类模板,如果后台没有设置,则使用默认模板 (2).模板页面案例 先来回顾一

    2024年02月01日
    浏览(55)
  • 小程序学习(四):WXML模板语法

    1.数据绑定的基本原则 ①在data中定义数据 ②在WXML中使用数据 2.动态绑定属性 3.什么是事件 4.小程序中常用的事件  5.事件对象的属性列表  6.target和currentTarget的区别  7.bindtap的语法格式  8.在事件处理函数中为data中的数据赋值  9.事件传参  10.bindinput的语法格式  11.实现文本

    2024年02月14日
    浏览(37)
  • 小程序系列-5.WXML 模板语法

    1、在 data 中定义页面的数据  动态绑定内容:  动态绑定属性: 2. Mustache 语法的格式    3. Mustache 语法的应用场景  4. 三元运算   5.算数运算   1. 什么是事件? 2. 小程序中常用的事件  3. 事件对象的属性列表    4. target 和 currentTarget 的区别  5. bindtap 的语法格式  6. 在事

    2024年01月17日
    浏览(46)
  • 我的学习笔记——微信小程序开发“渲染层错误”

    报错信息 [渲染层错误] Framework inner error (expect FLOW_CREATE_NODE but get another)(env: Windows,mp,1.06.2209190; lib: 2.25.4) [渲染层错误] Error: Framework inner error (expect FLOW_CREATE_NODE but get another)     at ln (http://127.0.0.1:38316/__pageframe__/__dev__/WAWebview.js?t=wechats=1667714729240v=2.25.4:1:2018909)     at sn (http:/

    2024年02月09日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包