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


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项链效果
Feb 13 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue动态绑定style样式
Apr 20 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
用在PHP里的JS打印函数
2006/10/09 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
毕业生的自我评价
2013/12/30 职场文书
工伤赔偿协议书
2014/04/15 职场文书
中班幼儿评语大全
2014/04/30 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
爱国之歌(8首)
2019/09/29 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
详解Python描述符的工作原理
2021/06/11 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS