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


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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
vue-dialog的弹出层组件
May 25 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 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
我的论坛源代码(三)
2006/10/09 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python实现超市商品销售管理系统
2019/11/22 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
食品行业求职人的自我评价
2014/01/19 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
电台编导求职信
2014/05/06 职场文书
环保倡议书100字
2014/05/15 职场文书
个人自荐书怎么写
2015/03/26 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Nginx 常用配置
2022/05/15 Servers