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


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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
Javascript实现简易天数计算器
May 18 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
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python爬取国外天气预报网站的方法
2015/07/10 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python中正则表达式与模式匹配
2019/05/07 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python中turtle库的使用实例
2019/09/09 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
探亲假请假条
2014/04/11 职场文书
食品安全标语
2014/06/07 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
先进个人材料怎么写
2014/12/30 职场文书
超市督导岗位职责
2015/04/10 职场文书
写给老师的保证书
2015/05/09 职场文书
地震捐款简报
2015/07/21 职场文书