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


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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
一个JavaScript获取元素当前高度的实例
Oct 29 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 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中array_slice函数用法实例详解
2014/11/25 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
详解vue.js之props传递参数
2017/12/12 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
python中redis的安装和使用
2016/12/04 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python绘制热力图示例
2019/09/27 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
学期自我鉴定
2013/11/04 职场文书
手机被没收检讨书
2014/02/22 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
销售督导岗位职责
2015/04/10 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers