微信小程序入门-事件冒泡、模板、视图渲染
来源:互联网 发布:ovid数据库优点 编辑:程序博客网 时间:2024/05/20 09:47
事件冒泡:
touchend是结束触摸,是指你的手指从按下到收回
touchcancel是触摸取消,是指在触摸过程中有其他程序覆盖了小程序,例如来电话了
模板,如果每个页面有公用的部分,可以写成一个模板:
方法一:
<text>头部</text>引用的地方
<include src="../templates/header" />
方法二:
<template name="footer1">底部1</template><template name="footer2">{{text}}</template>
引用的地方:
<import src="../templates/footer" /><template is="footer2" data="{{text:'123'}}"> </template>
视图渲染:
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
vshidden
因为wx:if
之中的模板也可能包含数据绑定,所以当wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if
也是惰性的,如果在初始渲染条件为false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden
更好,如果在运行时条件不大可能改变则wx:if
较好。
阅读全文
0 0
- 微信小程序入门-事件冒泡、模板、视图渲染
- 微信小程序入门——视图层——视图、事件、模板
- 微信小程序入门四:视图层事件
- 微信小程序视图与渲染
- 微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法
- [Wondgirl] 微信小程序(二)视图渲染
- 解决微信小程序冒泡事件
- 微信小程序页面跳转事件绑定/冒泡,非冒泡事件
- 微信小程序 事件冒泡(十二)
- 微信小程序:冒泡事件及其阻止
- 微信小程序如何阻止事件冒泡
- 微信小程序学习(4)_视图渲染
- 微信小程序学习笔记 2.3.1 视图与渲染
- 讲述以下微信小程序中的冒泡事件和非冒泡
- 微信小程序视图template模板引用
- 微信小程序 事件冒泡,bangtap,catchtap事件绑定
- 微信小程序入门三:视图层
- D3D视频渲染入门程序.
- Spring Boot学习总结(9)——SpringBoot集成Ehcache3.x
- ELK 完整部署和使用
- POJ 2318 TOYS <计算几何>
- 八数码问题
- Maven3 快速入门
- 微信小程序入门-事件冒泡、模板、视图渲染
- 2017CCPC秦皇岛 E:String of CCPC
- Qt下MSVC/Mingw平台dump/crash log报告调试方法差异
- hdu 6225 Little Boxes
- String of CCPC(CCPC秦皇岛)
- java 水仙花
- 关于我的博客
- Anton and Chess CodeForces
- 关于Q群-昌盛街街民联合会