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


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 ajax abort()的使用方法
Oct 28 Javascript
jquery对表单操作2
Apr 06 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
分享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
PHP4实际应用经验篇(7)
2006/10/09 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
div模拟滚动条效果示例代码
2013/10/16 Javascript
js 通用订单代码
2013/12/23 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python Celery定时任务的示例
2018/03/13 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python实现自动清理重复文件
2020/08/24 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
审核会计岗位职责
2013/11/08 职场文书
优秀毕业生求职信
2014/06/05 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android