微信小程序之表单组件

news2024/11/20 1:29:09

1、button

常用的属性:
属性类型默认值必填说明
sizestringdefault按钮的大小
合法值说明
default默认大小
mini小尺寸
typestringdefault按钮的样式类型
合法值说明
primary绿色
default白色
warn红色
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
hover-class stringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber20按住后多久出现点击态,单位毫秒
hover-stay-timenumber70手指松开后点击态保留时间,单位毫秒
代码案例: 
<button>这是一个按钮</button>
<button size="mini" type="primary" >这是一个按钮</button>
<button size="mini" type="primary" plain >这是一个按钮</button>
<!--disbaled后就无法继续点击了、plain镂空-->
<button size="mini" type="primary" plain disabled>这是一个按钮</button>
<!--loading属性要设置为false的话,必须这样写:放在差值表达式中,要不然不起作用-->
<button type="primary" loading="{{false}}">这是一个按钮</button>

2、input

常用的属性:
属性类型默认值必填说明
valuestring输入框的初始内容
typestringtextinput 的类型
合法值说明
text文本输入键盘
number数字输入键盘
idcard身份证输入键盘
digit带小数点的数字键盘
safe-password密码安全输入键盘 指引。仅 Webview 支持。
nickname昵称输入键盘。
passwordbooleanfalse是否是密码类型1.0.0
placeholderstring输入框为空时占位符1.0.0
placeholder-stylestring

指定 placeholder 的样式,目前仅支持

color,font-size和font-weight

1.0.0
disabledbooleanfalse是否禁用1.0.0
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度
confirm-typestringdone设置键盘右下角按钮的文字,仅在type='text'时生效
合法值说明
send右下角按钮为“发送”
search右下角按钮为“搜索”
next右下角按钮为“下一个”
go右下角按钮为“前往”
done右下角按钮为“完成”

 .wxss:

.out{
  padding:30rpx;
  border:1px solid #ccc;
  margin:30rpx;
}

.out .inpt{
  background:#eee;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.wxml:


<!--maxlength:最大能输入的字数,文本块类型默认是text,也有数字键盘等等-->
<view class = "out"> 
  <input type = "text" class="inpt"  maxlength="6"/>
  <button type="primary">提交按钮</button>
</view>
<!--value初始值一般和disabled联合使用,不能修改的、只读的初始值-->
<view class = "out"> 
  <input type = "text" class="inpt" value="初始值"/>
  <button type="primary">提交按钮</button>
</view>
<view class = "out"> 
  <input type = "text" class="inpt" placeholder="请输入用户名" />
  <button type="primary">提交按钮</button>
</view>
 
<view class = "out"> 
  <input type = "text" class="inpt" placeholder="请输入密码" password />
  <button type="primary">提交按钮</button>
</view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1514342.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Transformer原理

在《机器学习综述》中大致罗列人工智能常见算法&#xff0c;近些年深度学习发展快速&#xff0c;其中Transformer为甚&#xff0c;其英文的意思是变形金刚&#xff0c;对的就是我们看电影变形金刚的意思。Transformer是大语言模型的基础&#xff0c;比如现在常见的GPT、Bert、P…

详解Python中%r和%s的区别及用法

首先看下面的定义&#xff1a; %r用rper()方法处理对象 %s用str()方法处理对象 函数str() 用于将值转化为适于人阅读的形式&#xff0c;而repr() 转化为供解释器读取的形式&#xff08;如果没有等价的语法&#xff0c;则会发生SyntaxError 异常&#xff09; 某对象没有适于人…

数据库增删改查以及联合查询——数据库——day1

今天学习了数据库的知识 首先数据库分为关系型数据库和非关系型数据库 关系型数据库:Mysql OracleSqlServerSqlite 非关系型数据库&#xff1a;RedisNoSQL我们首先来看一下数组、链表、文件、数据库的区别 数组、链表: 内存存放数据的方式(代码运行结束、关机数据丢失) …

JS数组相关知识

获取数组的最大值/最小值&#xff1a; let arrary [2,5,4] let max arrary[0] for(let i 0;i<arrary.length;i){if(arrary[i]>max){max arrary[i]} }console.log(max);//查询数组最小值let arr [2,21,34,23,45] let min arr[0] for(let i 0;i<arr.length;i){if…

“我快无聊死了”用英语怎么说?柯桥英语口语学习,成人零基础学外语

每日一句 Im bored to death. 我快无聊死了。 单词解析&#xff1a; bored / bɔːd / adj.无聊的&#xff0c;厌倦的 bored to d15857575376eath&#xff1a;指非常无聊或厌烦&#xff0c;达到了极点的程度。 "bored" 和 "boring" 都与无聊相关&#…

蓝桥杯练习系统(算法训练)ALGO-980 斐波那契串

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;10.0s Java时间限制&#xff1a;30.0s Python时间限制&#xff1a;50.0s 问题描述 斐波那契串由下列规则生成&#xff1a;   F[0] "0";   F[1] "1";   F[n] F[n-1] F[n-2]…

AI人工智能改变项目管理及控制的5种方式,最后一个你认同吗?

前言 斯蒂芬霍金说&#xff1a;“AI is likely to be either the best or the worst thing to happen to humanity. 人工智能可能是发生在人类身上的最好或最坏的事情”。根据Gartner的说法&#xff0c;它将是前者。它预测到2020年&#xff0c;人工智能将减少1万个就业机会&am…

软件设计师15--进程资源图

软件设计师15--进程资源图 考点1&#xff1a;进程资源图例题&#xff1a; 考点1&#xff1a;进程资源图 例题&#xff1a; 1、在如下所示的进程资源图中&#xff0c;D&#xff09;。 A、P1、P2、P3都是非阻塞节点&#xff0c;该图可以化简&#xff0c;所以是非死锁的 B、P1、…

Linux:1_常见指令以及权限理解(上)

常见指令以及权限理解 一.补充知识 为方便初学者更好的理解Linux系统,这部分将对比windows系统补充一部分必要知识1 2 3 4 5 6 二.补充指令 1. 重新认识指令: 指令本质都是程序 —指令、程序、可执行程序都是一回事(都是文件内容属性)指令就是程序 … 安装和卸载是在把可…

【Axure高保真原型】下拉列表切换图表

今天和大家分享通过下拉列表动态切换统计图表的原型模板&#xff0c;我们可以通过下拉列表选择要显示的图表&#xff0c;包括柱状图、条形图、饼图、环形图、折线图、曲线图、面积图、阶梯图、雷达图&#xff1b;而且图表数据可以在左侧表格中动态维护&#xff0c;包括增加修改…

深入理解Vue3中利用mitt:实现轻量级事件监听与触发

深入理解Vue3中利用mitt&#xff1a;实现轻量级事件监听与触发 摘要&#xff1a;本文将介绍如何在Vue3中利用mitt库实现轻量级的事件监听与触发。我们将详细介绍mitt库的特性和使用方法&#xff0c;并通过实际示例展示如何在Vue3组件中应用mitt。 一、引言 在前端开发中&…

LeetCode24.两两交换链表节点

24.两两交换链表中的节点 这道题&#xff0c;重点在于理清楚各个指针之间的关系。 链表的题一定要注意断链和连接的顺序&#xff0c;有时候需要申请新的节点来保存某个节点&#xff0c;防止断链 24。题目 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交…

Selenium Web自动化测试——基于unittest框架的PO设计模式

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

回归测试,有什么高效的测试方法?

什么是回归测试&#xff1f; 回归测试&#xff08;Regression testing&#xff09; 指在发生修改之后重新测试先前的测试以保证修改的正确性。理论上&#xff0c;软件产生新版本&#xff0c;都需要进行回归测试&#xff0c;验证以前发现和修复的错误是否在新软件版本上再次出现…

虚拟机Centos8登陆之后又弹回到登陆界面

今天开机发行&#xff0c;虚拟机Centos登陆之后又弹回到登陆界面&#xff0c;在网上一通搜索之后&#xff0c;发现Centos7正确输入账号密码后&#xff0c;循环进入输入账号密码界面&#xff08;情况一设置错误PATH&#xff09;&#xff0c;以及进入单用户模式_centos一直卡在用…

120.PyQt5_QPainter_图形绘制控件

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

第6章:6.1 文本格式化 (MATLAB入门课程)

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 在数据处理与报告生成的过程中&#xff0c;我们经常需要将数据转…

AI“造神运动”终结,杀死,重生

AGI回归本质&#xff0c;百亿美金创业机会涌现。 “专注AI技术迭代会让我焦虑&#xff0c;关注业务我不会焦虑&#xff0c;有些问题十年前存在十年后还在&#xff0c;我现在就明确不卷模型&#xff0c;只思考如何让产品能自我‘造血’。” 一位正卷在AI创业洪流里的硅谷创业者…

重学SpringBoot3-WebMvcConfigurer接口

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-WebMvcConfigurer接口 WebMvcConfigurer基本信息为什么WebMvcConfigurer能配置底层行为实现WebMvcConfigurer举例1. 自定义格式化器和转换器2. 添加拦截…

AI新工具(20240313) 世界上第一个完全自主的AI软件工程师Devin 已经开始接外包了;又一个开源本地知识库问答系统

1: Cognition AI Devin 世界上第一个完全自主的AI软件工程师Devin 已经开始接外包了 Devin是世界上第一个完全自主的AI软件工程师&#xff0c;具备长期推理和规划的能力&#xff0c;能够执行复杂的工程任务&#xff0c;包括学习、修复错误、与用户实时合作等。Devin可以学习并…