首页IT科技微信小程序渲染html(【微信小程序】条件渲染和列表渲染)

微信小程序渲染html(【微信小程序】条件渲染和列表渲染)

时间2025-06-13 19:30:35分类IT科技浏览4602
导读:🍒🍒 观众老爷们好啊,牛牛又更新了,上文我们详细了解了微信小程序中的事件绑定,那么今天我们就来讲讲WXML语法中的列表渲染和条件渲染,它俩也是非常重要的知识点,赶紧学起来吧。 🍒🍒 不过首先,我们想来补充一下数据传参的知识点以及常用的input事件用法。...

🍒🍒 观众老爷们好啊            ,牛牛又更新了                  ,上文我们详细了解了微信小程序中的事件绑定      ,那么今天我们就来讲讲WXML语法中的列表渲染和条件渲染            ,它俩也是非常重要的知识点                  ,赶紧学起来吧            。

🍒🍒 不过首先      ,我们想来补充一下数据传参的知识点以及常用的input事件用法                  。

一      ,事件传参

首先我们需要知道                  ,微信小程序中事件处理函数的传参            ,并不能直接在绑定时间的同时做      ,也就是说以下这样操作      。

<view bindtap="tapName(2)">错误</view>

是不行的                  ,如此编译器只会将整个tapName(2)识别成事件处理函数的名字            。

如果想要传参            ,需要为组件提供自定义属性,格式如此——data-*                  ,*代表该自定义属性的名字                  。

具体实现如下:

<view bindtap="tapName" data-info="{{2}}"></view>

然后我们在事件处理函数中                  ,只需要通过event.target.dataset.info即可获取该传入的参数      。

还记得之前说过事件对象event中的target属性吗,里面就是记录触发事件组件的一些属性值            ,上面用到的原理就是这里      。

小tip: 需要注意的是                  ,对于已经确认为数值的参数      ,我们采用Mustache语法            ,也就双括号括住参数                  ,而如果我们只是用双引号包围      ,如下:

<view bindtap="tapName" data-info="2"></view>

解析到的data-info的值将会是一个字符串      ,"2"                  。

二                  ,input事件使用

input事件在小程序开发中是比较常用的            ,具体表述就是为文本框绑定事件      ,当内容发生变化触发            。

如下设置:

<input type="text" bidninput="changetext"></input>

一般我们使用该事件时                  ,需要在对应的事件处理函数获取到input文本框的输入值            ,可以如下进行操作:

changetext(e){ console.log(e.detail.value) }

e.detail.value就是对应着变化后的最新值      。

三,条件渲染

条件渲染其实就相当于在WXML中的if语句                  ,利用条件判断是否渲染某一个或一部分的组件                  。

语法为wx:if="{{condition}}"                  ,通过判断里面的condition增加来渲染,如果为true            ,则渲染组件            。

除了if                  ,还有与之配套的elif和else。

<view wx:if="{{type==1}}"></view> <view wx:if="{{type==2}}"></view> <view>不详</view>

当type为1      ,只有第一个view组件被渲染            ,当type为2                  ,只有第二个组件被渲染      ,如果均不满足      ,则只渲染第三个组件                  。

其实条件渲染除了if还有hidden可以做到                  。

语法为hidden= "{{condition}}"                  ,hidden为组件属性            ,当里面condition条件值为false      ,组件不隐藏                  ,为true            ,组件隐藏。

说到这里大家可能发觉,我们还不知道如何一次性控制多组件展示隐藏            。

微信小程序中有一个<block>                  ,它并不是组件                  ,只是有包裹性质的容器,即使写进wxml            ,也不会被渲染(调试器也不会看到它的存在)                  ,我们可以利用它来实现                  。

<block wx:if="{{info==1}}"> <view>a</view> <view>b</view> <view>c</view> </block>

if和hidden对比:

从本质上      ,

if是动态创建和移除组件 而hidden是通过改变样式            ,设置display为none或block实现的

从使用上                  ,当我们需要频繁的切换时      ,建议使用hidden      ,而当控制条件复杂时                  ,特别需要用到elseif效果的时候            ,建议使用if      。

四      ,列表渲染

列表渲染其实从理解上                  ,就是在wxml语法中的for语句            ,实现循环            。

语法为wx:for="{{array}}",根据指定数组                  ,循环渲染复杂的组件                  ,注意,双括号中的是数组哦                  。使用中            ,我们一般同时还有给其设定唯一key值                  ,语法为wx:key      。

比如我们的数组如下:

user:[ {id:1, name:"apple"}, {id:2, name:"add"}, {id:3, name:"abandon"} ]

这样我们可以设置wx:key="id"      ,当我们调用里面的name            ,循环会根据key遍历                  ,调用时key为何值      ,调用就是哪一个name值      。

<view wx:for="{{user}}" wx:key="id">{{name}}<view>

需要注意的是      ,设置key不需要使用{{}}

如果数组没有这种id属性                  ,我们可以直接设定key为index            ,如wx:key="index"      ,也是可以循环遍历数组                  。

好啦                  ,本次小程序的文章到这里就结束啦            ,如果对您有帮助的话,可以继续关注牛牛后续的文章呀                  ,您的支持是我们创作的最大动力!

🍒牛牛最近发现一款刷题神器                  ,各大互联网大厂的面试真题,还有超大面试题库            。

🍒里面还有很多大佬的面经            ,赶紧卷起来!!

点击直接访问

债见~~

声明:本站所有文章                  ,如无特殊说明或标注      ,均为本站原创发布      。任何个人或组织            ,在未征得本站同意时                  ,禁止复制            、盗用                  、采集      、发布本站内容到任何网站            、书籍等各类媒体平台                  。如若本站内容侵犯了原著者的合法权益      ,可联系我们进行处理            。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python赋值语句不合法的例子(python Faker库如何使用?) 衢州市常山县(衢州市常山县电话区号)