微信小程序 条件渲染 脚本控制view的隐藏显示
2017-05-18 18:15
861 查看
实际应用中 比如根据登录或其他状态属性的改变来动态改变某一页面的显示内容,可以用到此方法。
wx:if
在框架中,我们用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的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时
wx:if也是惰性的,如果在初始渲染条件为
false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,
hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,
wx:if有更高的切换消耗而
hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用
hidden更好,如果在运行时条件不大可能改变则
wx:if较好。
相关文章推荐
- 微信小程序弹出loading层的两种方法:直接在代码里控制,在wxml文件里布局弹窗loading层,利用条件渲染,在js代码里控制是否显示loading层。
- 微信小程序 通过控制CSS实现view隐藏与显示
- 详解微信小程序 通过控制CSS实现view隐藏与显示
- 微信小程序实践之动态控制组件的显示/隐藏功能
- 小程序web-view动态显示h5页面,根据不同条件显示不同网页——微信web-view高级用法13
- jquery each控制checkbox有关内容(table tr)的显示或隐藏(jquery 按条件隐藏显示已输出内容)
- 编写一个程序用于控制其他应用程序窗口的隐藏和显示:
- ViewAnimator控制视图的隐藏与显示
- 微信小程序使用JS隐藏view
- 使用脚本控制网页Table的显示隐藏(全代码)_AX
- 微信小程序 scroll-view隐藏滚动条详解
- 微信小程序wx:if条件渲染
- 微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法
- 【微信小程序】View组件与Flexbox弹性盒模型 字体颜色摆放显示案例,
- 微信小程序 条件渲染详解
- 微信小程序动态的显示或隐藏控件的方法(两种方法)
- 仿微信控制输入法的显示和隐藏
- 微信小程序 教程之条件渲染
- 微信小程序 教程之条件渲染
- 微信小程序动态显示或隐藏