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


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显示选择目录对话框的代码
Nov 10 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
node.js通过url读取文件
Oct 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广告加载类用法实例
2014/09/23 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
解密效果
2006/06/23 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
python下os模块强大的重命名方法renames详解
2017/03/07 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python 瀑布线指标编写实例
2020/06/03 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
消防安全责任书
2014/04/14 职场文书
给朋友的赠语
2015/06/23 职场文书
婚宴致辞
2015/07/28 职场文书
学校远程教育工作总结
2015/08/11 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python