微信小程序官方文档中表单组建button部分有关function(type)中type的个人理解
官方文档关于button组件的简介
xml页面挺容易理解,但js部分起初对整体写的形式都不太理解,随着逐渐阅读代码基本理解了
xml页面代码:
- <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
- disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
- <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
- disabled="{{disabled}}" bindtap="primary"> primary </button>
- <button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
- disabled="{{disabled}}" bindtap="warn"> warn </button>
- <button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
- <button bindtap="setPlain">点击设置以上按钮plain属性</button>
- <button bindtap="setLoading">点击设置以上按钮loading属性</button>
- <button open-type="contact">进入客服会话</button>
js代码:
- var types = ['default', 'primary', 'warn']
- var pageObject = {
- data: {
- defaultSize: 'default',
- primarySize: 'default',
- warnSize: 'default',
- disabled: false,
- plain: false,
- loading: false
- },
- setDisabled: function (e) {
- this.setData({
- disabled: !this.data.disabled
- })
- },
- setPlain: function (e) {
- this.setData({
- plain: !this.data.plain
- })
- },
- setLoading: function (e) {
- this.setData({
- loading: !this.data.loading
- })
- }
- }
- for (var i = 0; i < types.length; ++i) {
- (function (type) {
- pageObject[type] = function (e) {
- var key = type + 'Size'
- var changedData = {}
- changedData[key] =
- this.data[key] === 'default' ? 'mini' : 'default'
- this.setData(changedData)
- }
- })(types[i])
- }
- Page(pageObject)
起初很懵逼,一般不都是下边这种形式么
- Page({
data:{
},
- })
仔细一看后发现 Page(pageObject) 在最下边 pageObject是定义的一个函数,整体和之前没什么区别
但看到function(type)这部分后,有点懵逼,Google也搜不到关于function(type)的解释
- for (var i = 0; i < types.length; ++i) {
- (function (type) {
- pageObject[type] = function (e) {
- var key = type + 'Size'
- var changedData = {}
- changedData[key] =
- this.data[key] === 'default' ? 'mini' : 'default'
- this.setData(changedData)
- }
- })(types[i])
- }
结合最初定义的数组
- var types = ['default', 'primary', 'warn']
我就大胆猜测了一下,type可能是types[i]下当前的值,而
- var key = type + 'Size'
是对data中定义的函数进行重组成data中的函数defauSize,primarySize,warnSize,而type[i]又巧妙地用当前的值也就是xml页面中对应的bindTap值进行响应,继而改变button的size的值
微信小程序官方文档中表单组建button部分有关function(type)中type的个人理解的更多相关文章
- 微信小程序官方文档错误整理
大致看了一遍微信小程序文档,发现有几处微小的错误,但瑕不掩瑜.记录下,以后发现了还会继续在此添加.如果有记录不对的,请及时指出错误. 1.视图层->WXSS->尺寸单位 明显错误,应该为 ...
- 微信小程序官方文档
开发手册: https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html 管理后台: https://mp.weixin ...
- 微信小程序官方文档中的加密算法
用Nodejs来算一下:
- ***微信小程序学习文档和资料归档收集
微信小程序官方文档: https://cloud.tencent.com/document/product/619 小程序培训视频教程: https://xw.qq.com/edu/201805140 ...
- 微信小程序 PHP后端form表单提交实例详解
微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...
- 微信小程序入门文档
一 基本介绍 微信专门为小程序开发了一个ide叫做微信开发者工具 最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可以更换开发模式. https://mp.weixin.qq.com ...
- 微信-小程序-开发文档-服务端-模板消息:templateMessage.send
ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.send 1.返回顶部 1. templateMessage.send 本接口应在服务器端调用,详细说明参见服 ...
- 微信小程序 开发文档
官方开发文档: 小程序公众平台 小程序开发者指南 小程序开发者文档 学习资源: 微信:官方入门教程 微信:WeUI 是一套同微信原生视觉体验一致的基础样式库 微信:微信小程序示例 视频: 学堂在线:学 ...
- 微信小程序_(组件)form表单
Form表单.switch开关.数值选择器效果 官方文档:传送门 点击提交表单(按钮,提交开关,数值选择器,输入文本中)的值,显示在控制台上,点击重置,重置表单中的值. 实现过程 form表单,添加f ...
随机推荐
- Vue 04
目录 创建Vue项目 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 项目生命周期 添加组件-路由映射关系 文件式组件结构 配置全局css样式 子组件的 ...
- 图像处理之C语言实现二维卷积
在用C语言实现图像处理中,经常要用到二维卷积的运算,这个在matlab中是非常容易实现的,只需要conv2()就OK啦,而且速度非常的快.但是在C语言中就需要四层的for循环来实现了. 首先二维卷积的 ...
- LinuxProbe小结
1.修改主机名: /etc/hostname 2.配置 yum 软件仓库: (1)进入到 /etc/yum.repos.d/目录下,创建一个linuxprobe.repo的新文件(文件名称任意,结尾必 ...
- Python项目搬迁,快捷导出环境依赖包到requirements.txt
项目搬迁的时候,需要把当前的环境依赖包导出,然后到部署项目的服务器上安装依赖. 我们可以通过下面的命令执行,把依赖包导出到requirements.txt文件里. 生成requirements.txt ...
- 番茄助手 最新 Visual Assist X 适应于VS2019 VS2017 VS2015 VS2013 亲测可用
番茄助手 最新 Visual Assist X 适应于VS2019 VS2017 VS2015 VS2013 亲测可用 如图: 颜色已经改变: 下载说明: /* INSTALLATION 0) Uni ...
- Java 基础复习 基础数据类型与包装器类型
Java 基础 基础数据类型与包装器类型 基础数据类型 java 中包含哪些基础数据类型,默认值分别是多少? 基础数据类型 byte short int long double float char ...
- HIFIMAN TWS600A听感小记——测评出街Man
HIFIMAN TWS600A听感小记——测评出街Man 几年前蓝牙耳塞在大哥苹果的带领下有着掀翻小池塘的气势.蓝牙耳塞完全替代了我在通勤路上用的有线塞子,当时随便买了一副两百多元的塞子,低音轰头就算 ...
- EXCEPTION_ACCESS_VIOLATION(0xc0000005)
EXCEPTION_ACCESS_VIOLATION(0xc0000005)eclipse.ini中添加:-XX:CompileCommand=exclude,org.eclipse.jdt.inte ...
- 使用Python轻松批量压缩图片
在互联网,图片的大小对一个网站的响应速度有着明显的影响,因此在提供用户预览的时候,图片往往是使用压缩后的.如果一个网站图片较多,一张张压缩显然很浪费时间.那么接下来,我就跟大家分享一个批量压缩图片的方 ...
- #r语言(二)笔记
#r语言(二)笔记 #早复习 #概述:R是用于统计分析.绘图的语言和操作环境 #对象: #数据类型--统称为对象 #向量(vector):用于存储数值型.字符型或逻辑型数据的一维数组. #定义向量: ...