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


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实现的论坛常用的运行代码的效果
Jul 15 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
pandas 选择某几列的方法
2018/07/03 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
大学毕业感言200字
2014/03/09 职场文书
项目采购员岗位职责
2014/04/15 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
我的1919观后感
2015/06/03 职场文书
辩论赛新闻稿
2015/07/17 职场文书
教师旷工检讨书
2015/08/15 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
python编写五子棋游戏
2021/05/25 Python
js中Object.create实例用法详解
2021/10/05 Javascript
MySQL分区表实现按月份归类
2021/11/01 MySQL