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


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右键菜单效果代码
Jul 21 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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伪静态的实现方法解析
2020/07/31 PHP
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Ionic快速安装教程
2016/06/03 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python获取代理IP的实例分享
2018/05/07 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
详解python中的hashlib模块的使用
2019/04/22 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
考试没考好检讨书
2014/01/31 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
优质服务标语口号
2015/12/26 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Python闭包的定义和使用方法
2022/04/11 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS