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


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节点遍历next与nextAll方法使用示例
Jul 22 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
javascript内置对象操作详解
Feb 04 Javascript
$.extend 的一个小问题
Jun 18 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
vue-router 控制路由权限的实现
Sep 24 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
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
BootStrap中
2016/12/10 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python数据存储之 h5py详解
2019/12/26 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
数据库连接池的工作原理
2012/09/26 面试题
公司前台辞职报告
2014/01/19 职场文书
双方协议书
2014/04/22 职场文书
安全协议书
2014/04/23 职场文书
音乐剧猫观后感
2015/06/04 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
关于python类SortedList详解
2021/09/04 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL