微信小程序之绑定点击事件实例详解


Posted in Javascript onJuly 07, 2017

 微信小程序之绑定点击事件实例详解

微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了。

    首先,我们看一下如何添加底部的标签栏:在app.json里操作

{
 "pages":[
 //在这里添加页面的路径
  "pages/index/index",
  "pages/logs/logs",
   "pages/home/home"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "乐动健身馆",
  "navigationBarTextStyle":"black",
  "enablePullDownRefresh": true

 },
 //添加标题栏
 "tabBar": {
  "list": [{
   "pagePath": "pages/index/index",
   "text": "首页"

  },
  {
   "pagePath": "pages/logs/logs",
   "text": "日志"

  },{
   "pagePath": "pages/home/home",
   "text": "我的"

  }
  ]
 }
}

然后看看我们如何通过button来修改数据绑定:

微信小程序之绑定点击事件实例详解

很简单的操作,首先要在home.wxml来做设置:

<view>
//这里{{name}}!来修改所需要绑定的字符串
  <view>Hello {{name}}!</view>
  // bindtap 点击事件
  <button bindtap="changeName">点击我,换名字</button>
</view>

  然后在home.js里边做配置:

var helloData ={
  name: 'wechat'
}
Page({
  data:helloData,
  changeName:function(e){
    this.setData({
      name:'杨磊'
    })
  }
})

到这里已经把把绑定的微信按钮传递数据做完了

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
绑定回车enter事件代码
May 18 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
Vue实现日历小插件
Jun 26 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
如何利用React实现图片识别App
Feb 18 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
Vue.js数据绑定之data属性
Jul 07 #Javascript
js实现从左向右滑动式轮播图效果
Jul 07 #Javascript
JavaScript实现图片无缝滚动效果
Jul 07 #Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 #Javascript
微信小程序联网请求的轮播图
Jul 07 #Javascript
微信小程序点击控件修改样式实例详解
Jul 07 #Javascript
You might like
用Php实现链结人气统计
2006/10/09 PHP
PHP 字符串 小常识
2009/06/05 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
基于python log取对数详解
2018/06/08 Python
python 生成器需注意的小问题
2020/09/29 Python
旅游管理实习自我鉴定
2013/09/29 职场文书
法务专员岗位职责
2014/01/02 职场文书
三年级科学教学反思
2014/01/29 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
护理培训心得体会
2016/01/22 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript