微信小程序渲染html(【微信小程序】条件渲染和列表渲染)
🍒🍒 观众老爷们好啊 ,牛牛又更新了 ,上文我们详细了解了微信小程序中的事件绑定,那么今天我们就来讲讲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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!