微信小程序开发 [03] 事件、数据绑定和传递
1、事件绑定
- 事件绑定依附于组件,所以其绑定的写法和组件的属性写法是类似的,以key、value形式
- key以bind或catch开头并跟上事件类型,如bindtap、catchtap,也可以使用冒号如bind:tap、catch:tap
- value是一个字符串,对应Page中同名的函数
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<view class="usermotto">
<text class="user-motto" catchtap="onTextTap">{{motto}}</text>
</view>
<view class="usermotto">
<text class="user-motto" catchtap="onTextTap">{{motto}}</text>
</view>
2、事件分类
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
3、数据绑定
<text>Welcome,{{nickname}}!</text>
<text>Welcome,{{nickname}}!</text>
Page({
data:{
"nickname":"Dulk"
}
})
Page({
data:{
"nickname":"Dulk"
}
})
<checkbox checked="false"> </checkbox>
<checkbox checked="false"> </checkbox>
<checkbox checked="{{false}}"> </checkbox>
<checkbox checked="{{false}}"> </checkbox>
4、数据传递
- 将999传递到事件函数中
- 在事件函数中把999传递给welcome页面
4.1 将自定义属性值传递到事件函数中
<text class="user-motto" catchtap="onTextTap" data-number="999">{{motto}}</text>
<text class="user-motto" catchtap="onTextTap" data-number="999">{{motto}}</text>
4.2 将函数中的值传递到另一个页面
4.3 动态绑定数据和页面显示
微信小程序开发 [03] 事件、数据绑定和传递的更多相关文章
- 微信小程序开发之页面数据绑定
js:Page( { data:{ parmer:"", //字符串参数 userinfo:{ userphone:"", ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- 这是一篇满载真诚的微信小程序开发干货
1月9日零点刚过,张小龙与团队正式发布微信小程序.它究竟能在微信8.5亿用户中牵动多少人,现在还很难说.但对于创业者来讲,小程序无疑带来了新契机,以及服务“上帝”们的新方式. 从今天起,只要开发者登录 ...
- 初尝微信小程序开发与实践
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...
- 《腾讯游戏人生》微信小程序开发总结
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...
- 微信小程序开发教程(八)视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
- 微信小程序开发入门与实践
基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MIN ...
随机推荐
- ThinkPHP5+Layui实现图片上传加预览
html代码 <div class="layui-upload"> <button type="button" class="lay ...
- php+layui实现图片上传与预览
端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 1.String、StringBuffer与StringBuilder之间区别
1.三者在执行速度方面的比较:StringBuilder > StringBuffer > String 2.String <(StringBuffer,StringBuild ...
- vue 自定义组件的自定义属性
<auto-com :value="value"></auto-com> //带 : 的属性传入的是动态的值 <auto-com value=&quo ...
- [WPF 容易忽视的细节] —— x:Name与Name属性
一.前言 WPF使用XAML来对界面进行编写,界面与后台逻辑分离.我们也可以写Style.Trigger来实现一些界面效果, 这些都是通过Name来定位控件的,例如Setter.TargetName. ...
- Double Array Trie 的Python实现
不多介绍,可自行Google,或者其它关键词: "datrie" 放代码链接: double_array_trie.py 因为也是一段学习代码,参考的文章都记在里面了,主要参考gi ...
- svn其它
参考地址: http://www.cnblogs.com/mymelon/p/5483215.html
- HTML5学习资料
HTML5 的一些经典demo收集 Animated Books with CSS 3D Transforms 这是一个3D书本,CSS3完成 =========HTML5特效聚集网站======== ...
- JSP中文乱码问题终极解决方案
在介绍方法之前我们首先应该清楚具体的问题有哪些,笔者在本博客当中论述的JSP中文乱码问题有如下几个方面:页面乱码.参数乱码.表单乱码.源文件乱码.下面来逐一解决其中的乱码问题. 一.JSP页面中文乱码 ...
- IBM ServerGuide引导盘全系列下载网址
IBM ServerGuide引导盘全系列下载网址 官网链接 https://www.ibm.com/support/home/docdisplay?lndocid=SERV-GUIDE v9.30 ...