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


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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php 分页原理详解
2009/08/21 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
Vue中props的详解
2019/05/16 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python局部赋值的规则
2013/03/07 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python读写配置文件操作示例
2019/07/03 Python
浅析使用Python搭建http服务器
2019/10/27 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
珍惜水资源建议书
2014/03/12 职场文书
学校运动会简讯
2015/07/20 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
virtualenv隔离Python环境的问题解析
2022/06/21 Python