Wechat小程序 页面渲染

作者:编程    发布时间:2020-01-20 05:32     浏览次数 :

[返回]

原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!原文链接地址:「小程序JAVA实战」小程序视图之条件判断

小程序里面也是有条件判断的,我相信大家在开发java if和jstl c:if c:when。有人说在程序员眼里只有if else,可见重要性。一起了解下微信小程序额的条件判断吧。源码: 中的No.8

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

系列文章:

微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之条件渲染
微信小程序 教程之数据绑定
微信小程序 教程之WXML

wx:if

在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用wx:elif和wx:else来添加一个else块:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因为wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个<block/>标签将多个组件包装起来,并在上边使用wx:if控制属性。

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

注意: <block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

wx:if vs hidden

因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,MINA有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的,如果在初始渲染条件为false,MINA什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

教程之条件渲染,微信小程序渲染 系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程...

返回目录

小程序的条件判断

  1. <view wx:if={{condition}}>
  2. <block wx:if={{condition}}>
  3. 官方的阐述

图片 1

  1. 演示条件判断

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

ifElse.wxml

<!ifElse.wxml--><view > <view wx:if="{{age<18}}">未成年</view> <view wx:elif="{{age>=18 &&age<=30}}">已成年</view> <view wx:elif="{{age>30 &&age<=50}}">壮年,一起关注公众号:编程坑太多给我来点赞</view> <view wx:else>已经老了</view> <block wx:if="{{false}}"> <view>这是一个块级元素</view> <view>本节是if判断学习</view> </block> <view hidden='{{true}}'> <view>这是一个hidden元素</view> <view>hidden判断学习</view> </view></view>

ifElse.js

//ifElse.js//获取应用实例const app = getApp()Page({ data: { age: 34 }})

图片 2

hidden true很像咱们css里面的display:none 元素是有的,只是屏幕不显示wx:if 就类似咱们开发的java的jstl标签里面的if,直接元素就没有

PS:条件渲染也是很重要的,业务逻辑判断全靠它了。

图片 3

wx:for在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] }})

使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}}</view>

wx:for 也可以嵌套,下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view></view>

block wx:for

类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view></block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。wx:key 的值以两种形式提供

下一篇:没有了