微信小程序条件渲染和列表渲染

Posted 前端小刘不怕牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序条件渲染和列表渲染相关的知识,希望对你有一定的参考价值。

🍒🍒 观众老爷们好啊,牛牛又更新了,上文我们详细了解了微信小程序中的事件绑定,那么今天我们就来讲讲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,还有与之配套的elifelse

<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是通过改变样式,设置displaynoneblock实现的

从使用上,当我们需要频繁的切换时,建议使用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",也是可以循环遍历数组。

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

🍒牛牛最近发现一款刷题神器,各大互联网大厂的面试真题,还有超大面试题库。
🍒里面还有很多大佬的面经,赶紧卷起来!!
点击直接访问

债见~~

以上是关于微信小程序条件渲染和列表渲染的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 教程之条件渲染

微信小程序 之 条件渲染列表渲染

微信小程序自学第五课:条件渲染列表渲染

微信小程序开发——列表渲染 & 条件渲染 & tabBar & 页面跳转

微信小程序 if语法for循环 条件渲染列表渲染等讲解

微信小程序结构目录配置介绍视图层(数据绑定,运算,列表渲染,条件渲染)