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


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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
AngularJs表单验证实例详解
May 30 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Django choices下拉列表绑定实例
2020/03/13 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
主管会计岗位职责
2014/03/13 职场文书
简短清晨问候语
2015/11/10 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle