官方文档关于button组件的简介

xml页面挺容易理解,但js部分起初对整体写的形式都不太理解,随着逐渐阅读代码基本理解了

xml页面代码:

  1. <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
  2. disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
  3. <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
  4. disabled="{{disabled}}" bindtap="primary"> primary </button>
  5. <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
  6. disabled="{{disabled}}" bindtap="warn"> warn </button>
  7. <button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
  8. <button bindtap="setPlain">点击设置以上按钮plain属性</button>
  9. <button bindtap="setLoading">点击设置以上按钮loading属性</button>
  10. <button open-type="contact">进入客服会话</button>

js代码:

  1. var types = ['default', 'primary', 'warn']
  2. var pageObject = {
  3. data: {
  4. defaultSize: 'default',
  5. primarySize: 'default',
  6. warnSize: 'default',
  7. disabled: false,
  8. plain: false,
  9. loading: false
  10. },
  11. setDisabled: function (e) {
  12. this.setData({
  13. disabled: !this.data.disabled
  14. })
  15. },
  16. setPlain: function (e) {
  17. this.setData({
  18. plain: !this.data.plain
  19. })
  20. },
  21. setLoading: function (e) {
  22. this.setData({
  23. loading: !this.data.loading
  24. })
  25. }
  26. }
  27.  
  28. for (var i = 0; i < types.length; ++i) {
  29. (function (type) {
  30. pageObject[type] = function (e) {
  31. var key = type + 'Size'
  32. var changedData = {}
  33. changedData[key] =
  34. this.data[key] === 'default' ? 'mini' : 'default'
  35. this.setData(changedData)
  36. }
  37. })(types[i])
  38. }
  39.  
  40. Page(pageObject)

起初很懵逼,一般不都是下边这种形式么

  1. Page({
      data:{
    },
  onLoad: function (options) {
  }
  1. })

仔细一看后发现  Page(pageObject)  在最下边  pageObject是定义的一个函数,整体和之前没什么区别

但看到function(type)这部分后,有点懵逼,Google也搜不到关于function(type)的解释

  1. for (var i = 0; i < types.length; ++i) {
  2. (function (type) {
  3. pageObject[type] = function (e) {
  4. var key = type + 'Size'
  5. var changedData = {}
  6. changedData[key] =
  7. this.data[key] === 'default' ? 'mini' : 'default'
  8. this.setData(changedData)
  9. }
  10. })(types[i])
  11. }

结合最初定义的数组

  1. var types = ['default', 'primary', 'warn']

我就大胆猜测了一下,type可能是types[i]下当前的值,而

  1. var key = type + 'Size'

是对data中定义的函数进行重组成data中的函数defauSize,primarySize,warnSize,而type[i]又巧妙地用当前的值也就是xml页面中对应的bindTap值进行响应,继而改变button的size的值

微信小程序官方文档中表单组建button部分有关function(type)中type的个人理解的更多相关文章

  1. 微信小程序官方文档错误整理

    大致看了一遍微信小程序文档,发现有几处微小的错误,但瑕不掩瑜.记录下,以后发现了还会继续在此添加.如果有记录不对的,请及时指出错误. 1.视图层->WXSS->尺寸单位 明显错误,应该为 ...

  2. 微信小程序官方文档

    开发手册: https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html 管理后台: https://mp.weixin ...

  3. 微信小程序官方文档中的加密算法

    用Nodejs来算一下:

  4. ***微信小程序学习文档和资料归档收集

    微信小程序官方文档: https://cloud.tencent.com/document/product/619 小程序培训视频教程: https://xw.qq.com/edu/201805140 ...

  5. 微信小程序 PHP后端form表单提交实例详解

    微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...

  6. 微信小程序入门文档

    一 基本介绍 微信专门为小程序开发了一个ide叫做微信开发者工具 最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式. https://mp.weixin.qq.com ...

  7. 微信-小程序-开发文档-服务端-模板消息:templateMessage.send

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.send 1.返回顶部 1. templateMessage.send 本接口应在服务器端调用,详细说明参见服 ...

  8. 微信小程序 开发文档

    官方开发文档: 小程序公众平台 小程序开发者指南 小程序开发者文档 学习资源: 微信:官方入门教程 微信:WeUI 是一套同微信原生视觉体验一致的基础样式库 微信:微信小程序示例 视频: 学堂在线:学 ...

  9. 微信小程序_(组件)form表单

    Form表单.switch开关.数值选择器效果 官方文档:传送门 点击提交表单(按钮,提交开关,数值选择器,输入文本中)的值,显示在控制台上,点击重置,重置表单中的值. 实现过程 form表单,添加f ...

随机推荐

  1. Vue 04

    目录 创建Vue项目 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 项目生命周期 添加组件-路由映射关系 文件式组件结构 配置全局css样式 子组件的 ...

  2. 图像处理之C语言实现二维卷积

    在用C语言实现图像处理中,经常要用到二维卷积的运算,这个在matlab中是非常容易实现的,只需要conv2()就OK啦,而且速度非常的快.但是在C语言中就需要四层的for循环来实现了. 首先二维卷积的 ...

  3. LinuxProbe小结

    1.修改主机名: /etc/hostname 2.配置 yum 软件仓库: (1)进入到 /etc/yum.repos.d/目录下,创建一个linuxprobe.repo的新文件(文件名称任意,结尾必 ...

  4. Python项目搬迁,快捷导出环境依赖包到requirements.txt

    项目搬迁的时候,需要把当前的环境依赖包导出,然后到部署项目的服务器上安装依赖. 我们可以通过下面的命令执行,把依赖包导出到requirements.txt文件里. 生成requirements.txt ...

  5. 番茄助手 最新 Visual Assist X 适应于VS2019 VS2017 VS2015 VS2013 亲测可用

    番茄助手 最新 Visual Assist X 适应于VS2019 VS2017 VS2015 VS2013 亲测可用 如图: 颜色已经改变: 下载说明: /* INSTALLATION 0) Uni ...

  6. Java 基础复习 基础数据类型与包装器类型

    Java 基础 基础数据类型与包装器类型 基础数据类型 java 中包含哪些基础数据类型,默认值分别是多少? 基础数据类型 byte short int long double float char ...

  7. HIFIMAN TWS600A听感小记——测评出街Man

    HIFIMAN TWS600A听感小记——测评出街Man 几年前蓝牙耳塞在大哥苹果的带领下有着掀翻小池塘的气势.蓝牙耳塞完全替代了我在通勤路上用的有线塞子,当时随便买了一副两百多元的塞子,低音轰头就算 ...

  8. EXCEPTION_ACCESS_VIOLATION(0xc0000005)

    EXCEPTION_ACCESS_VIOLATION(0xc0000005)eclipse.ini中添加:-XX:CompileCommand=exclude,org.eclipse.jdt.inte ...

  9. 使用Python轻松批量压缩图片

    在互联网,图片的大小对一个网站的响应速度有着明显的影响,因此在提供用户预览的时候,图片往往是使用压缩后的.如果一个网站图片较多,一张张压缩显然很浪费时间.那么接下来,我就跟大家分享一个批量压缩图片的方 ...

  10. #r语言(二)笔记

    #r语言(二)笔记 #早复习 #概述:R是用于统计分析.绘图的语言和操作环境 #对象: #数据类型--统称为对象 #向量(vector):用于存储数值型.字符型或逻辑型数据的一维数组. #定义向量: ...