微信小程序开发 [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 ...
随机推荐
- 从无到有,用Nodejs+express+mongodb搭建简易登陆系统
前端处理server表示很蛋疼,初学Node,虽然感觉异常强大,但是学起来还是有些吃力的,Node是工具,它不是万能的,搭建一个系统还是需要借助其他一些工具,对于我这个没怎么接触server的前端来说 ...
- 高并发情况下,如何生成分布式全局id
1.使用UUID生成全局id,不占用宽带 2.基于数据库自增或者序列生成全局id,占用宽带,设置自增步长实现集群,但可扩展性差 3.基于redis生成全局id,占用宽度,设置自增步长实现集群,性能比数 ...
- CSS隐藏多余的文字
效果: <p><strong>商品名称:</strong>新鲜现摘云南绥江半边红李子甜脆脱骨李6斤当季绿色有机水果包邮</p></div> ...
- 从零开始学习html(九)CSS的继承、层叠和特殊性
一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- 移动端开发时默认样式reset
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...
- Django. No changes detected when "makemigrations"
在修改了models.py后,有些用户会喜欢用python manage.py makemigrations生成对应的py代码. 但有时执行python manage.py makemigration ...
- 如何选型商业智能和分析平台,Gartner给了这些建议!
文 | 水手 在2017年1月20日Gartner发布的<China Summary Translation: 'Survey Analysis: Customers Rate Their BI ...
- flutter 防止键盘弹出 导致超出屏幕
return Scaffold( appBar: AppBar( elevation: 0.0, title: new Text("登陆"), ), resizeToAvoidBo ...
- java中Proxy(代理与动态代理)
转自: https://blog.csdn.net/pangqiandou/article/details/52964066 一.代理的概念 动态代理技术是整个java技术中最重要的一个技术,它是学习 ...
- Oracle EBS 银行账户API
创建银行 -- Create Bank DECLARE p_init_msg_list VARCHAR2(200); p_country_code VARCHAR2(200); p_bank_nam ...