条件渲染
//if语句<view wx:if="{{condition}}"> True </view>//if..else 语句<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>//block wx:if<block wx:if="{{true}}"><view> view1 </view><view> view2 </view></block>自定义模板使用和引用
import
import可以在该文件中使用目标文件定义的template,如:
在 item.wxml 中定义了一个叫item的template:
<!-- item.wxml --><template name="item"><text>{{text}}</text></template>在 index.wxml 中引用了 item.wxml,就可以使用item模板:
<import src=https://www.isolves.com/it/cxkf/ydd/xcx/2021-03-08/"item.wxml"/>import 的作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template 。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template 。
<!-- A.wxml --><template name="A"><text> A template </text></template><!-- B.wxml --><import src=https://www.isolves.com/it/cxkf/ydd/xcx/2021-03-08/"a.wxml"/>include
include 可以将目标文件除了 外的整个代码引入,相当于是拷贝到 include 位置,如:
<!-- index.wxml --><include src="header.wxml"/><view> body </view><include src="footer.wxml"/><!-- header.wxml --><view> header </view><!-- footer.wxml --><view> footer </view>//声明<!--index: intmsg: stringtime: string--><template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template>//使用<template is="msgItem" data="{{...item}}"/>//数据 Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}})//使用2<template name="odd"><view> odd </view></template><template name="even"><view> even </view></template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/></block>事件
【微信小程序开发:一篇文章掌握基础配置、基本语法和功能】touchstart
touchmove
touchcancel
touchend
tab
longpress //超过350ms
transitionend
animationstart
animationiteration//迭代结束时触发
animationend
touchforcechange //支持3DTouch的iphone重按时触发
//bing事件名 会冒泡
//catch事件 阻止冒泡
//mut-bind 冒泡对它无效
//事件函数参数e(事件对象),可以携带数据
//data-**
<view data-name="自定义数据"></view>e.currentTarget.dataset.name //mark<view mark:user="jack"></view>e.mark.user例子
{"type":"tap","timeStamp":895,"target": {"id": "tapTest","dataset":{"hi":"WeChat"}},"currentTarget":{"id": "tapTest","dataset": {"hi":"WeChat"}},"detail": {"x":53,"y":14},"touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}],"changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}]}
动画
this.animate(selector, keyframes, duration, callback) this.animate('#container', [{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},{ opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },], 5000, function () {this.clearAnimation('#container', { opacity: true, rotate: true }, function () {console.log("清除了#container上的opacity和rotate属性")})}.bind(this))this.animate('.block', [{ scale: [1, 1], rotate: 0, ease: 'ease-out'},{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},{ scale: [2, 2], rotate: 90 },], 5000, function () {this.clearAnimation('.block', function () {console.log("清除了.block上的所有动画属性")})}.bind(this))
推荐阅读
- 微信小程序开发教程:WeUI一个专为微信小程序设计的UI框架
- 辣煸四季豆的做法
- 欧阳修珍藏小龙团,2013年大益小龙柱开汤鉴赏
- 主角是叶婉兮萧裴琛的小说叫什么名字?
- 冬季女性小心“靴子病” 靴腰过紧会引起腱鞘炎
- 冬季天冷易感冒 这些预防小妙招怎能错过
- 女性朋友注意啦!冬季穿得少小心冻出病
- 冬季运动要谨慎 老年人要小心扭伤
- 三年级作文让我最感动的一件事?小学三年级作文一件令我感动的事
- 小猫下生多久才会喝奶 小猫出生几个小时内要喝上奶
