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


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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Openlayers实现点闪烁扩散效果
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
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
社区活动策划方案
2014/08/21 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
高中班主任评语
2014/12/30 职场文书
工程进度款催款函
2015/06/24 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
七个非常实用的Python工具包总结
2021/06/15 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL