草庐IT

【微信小程序】条件渲染 列表渲染 原来这样用?

热爱编程的小白白 2024-06-17 原文

目录

WXML 模板语法 - 条件渲染

🍊1. wx:if

🍋2. 结合 使用 wx:if

🍉3. hidden

🍓4. wx:if 与 hidden 的对比

WXML 模板语法 - 列表渲染

🥭1. wx:for

🍍2. 手动指定索引和当前项的变量名

🥝3. wx:key 的使用


WXML 模板语法 - 条件渲染

🍊1. wx:if

在小程序中,使用 wx:if="{{ condition }}" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}">ture</view>
也可以用 wx:elif wx:else 来添加 else 判断:
<view wx:if="{{type==1}}">type==1</view>
<view wx:elif="{{type==2}}">type==2</view>
<view wx:else>type==3</view>

js:

Page({

data: {
  type:1
},


})

因为type的值为1,所以:

 

例如:

WXML:

<view wx:if="{{type==1}}">主色调</view>
<view wx:elif="{{type==2}}">普通按钮</view>
<view wx:else>无</view>

<button type="primary" size="mini" wx:if="{{type==1}}">主色调</button>
<button size="mini" wx:if="{{type==2}}">普通按钮</button>

JS和上面的一样

效果:

 

🍋2. 结合 <block> 使用 wx:if

如果要 一次性控制多个组件的展示与隐藏 ,可以使用一个 <block></block> 标签将多个组件包装起来,并在 <block> 标签上使用 wx:if 控制属性,示例如下:
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
<view>view3</view>
</block>

 

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

🍉3. hidden

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

 hidden 中  false  表示不隐藏组件

true表示隐藏组件

🍓4. wx:if 与 hidden 的对比

① 运行方式不同
wx:if 以 动态创建和移除元素 的方式,控制元素的展示与隐藏
hidden 以 切换样式 的方式(display: none/block;),控制元素的显示与隐藏
② 使用建议
频繁切换 时,建议使用 hidden
控制条件复杂 时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

WXML 模板语法 - 列表渲染

🥭1. wx:for

通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
<view wx:for="{{arry}}">
索引是:{{index}},item项是:{{item}}
</view>

JS:

Page({

data: {
  arry:['橘子','苹果','香蕉']
}


})

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

 

🍍2. 手动指定索引和当前项的变量名

使用 wx:for-index 可以指定 当前循环项的索引 的变量名
使用 wx:for-item 可以指定 当前项 的变量名
示例代码如下:

🥝3. wx:key 的使用

类似于 Vue 列表渲染中的 :key ,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值, 从而 提高渲染的效率 ,示例代码如下:
<view wx:for="{{userList}}" wx:key="id">
{{item.name}}
</view>

 JS:

Page({

data: {
 userList:[
   {id:1,name:'热'},
   {id:2,name:'爱'},
   {id:3,name:'编'},
   {id:4,name:'程'},
   {id:5,name:'的'},
   {id:6,name:'小'},
   {id:7,name:'白'},
   {id:8,name:'白'},
 ]
}


})

效果:

有关【微信小程序】条件渲染 列表渲染 原来这样用?的更多相关文章

  1. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  2. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候,我们都会看到一个可能包含5个或更多ruby的列表,我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  6. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法,我该如何引发错误??通常,我如何定义方法参数的条件?比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头,如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  8. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  10. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

随机推荐