【第五节:微信小程序 小程序UI组件B】微信小程序入门,以思维导图的方式展开5

news2024/11/23 7:47:40

上图若是看不清,可私信给发大图哈 

5、小程序UI组件B

表单form


    button    按钮
        size    String    default    有效值 default, mini
        type    String    default    按钮的样式类型,有效值 primary, default, warn
        plain    Boolean    false    按钮是否镂空,背景色透明
        disabled    Boolean    false    是否禁用
        loading    Boolean    false    名称前是否带 loading 图标
        form-type    String    无    有效值:submit, reset,用于 <form/> 组件,点击分别会触发 submit/reset 事件
        open-type    String    无    有效值:contact,打开客服会话
        hover-class    String    button-hover    指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
        hover-start-time    Number    20    按住后多久出现点击态,单位毫秒
        hover-stay-time    Number    70    手指松开后点击态保留时间,单位毫秒
    form    表单
        report-submit    Boolean    是否返回 formId 用于发送模板消息
        bindsubmit    EventHandle    携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}
        bindreset    EventHandle    表单重置时会触发 reset 事件
    input    输入框
        value    String        输入框的初始内容
        type    String    "text"    input 的类型,有效值:"text", "number", "idcard", "digit"
        password    Boolean    false    是否是密码类型
        placeholder    String        输入框为空时占位符
        placeholder-style    String        指定 placeholder 的样式
        placeholder-class    String    "input-placeholder"    指定 placeholder 的样式类
        disabled    Boolean    false    是否禁用
        maxlength    Number    140    最大输入长度,设置为 -1 的时候不限制最大长度
        cursor-spacing    Number    0    指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
        auto-focus    Boolean    false    (即将废弃,请直接使用 focus )自动聚焦,拉起键盘
        focus    Boolean    false    获取焦点
        confirm-type    String    "done"    设置键盘右下角按钮的文字,有效值: "send","search","next","go","done"
        confirm-hold    Boolean    false    点击键盘右下角按钮时是否保持键盘不收起
        bindinput    EventHandle        当键盘输入时,触发input事件,event.detail = {value: value},处理函数可以直接 return 一个字符串,将替换输入框的内容。
        bindfocus    EventHandle        输入框聚焦时触发,event.detail = {value: value}
        bindblur    EventHandle        输入框失去焦点时触发,event.detail = {value: value}
        bindconfirm    EventHandle        点击完成按钮时触发,event.detail = {value: value}
    checkbox    多项选择器
        bindchange    EventHandle        <checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}
    radio    单项选择器
        radio-group
            bindchange    EventHandle        <radio-group/> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}
        value    String        <radio/> 标识。当该<radio/> 选中时,<radio-group/> 的 change 事件会携带<radio/>的value
        checked    Boolean    false    当前是否选中
        disabled    Boolean    false    是否禁用
        color    Color        radio的颜色,同css的color
    picker    列表选择器
        普通选择器:mode = selector
            range    Array / Object Array    []    mode为 selector 时,range 有效
            range-key    String        当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
            value    Number    0    value 的值表示表示选择了 range 中的第几个(下标从 0 开始)。
            bindchange    EventHandle        value 改变时触发 change 事件,event.detail = {value: value}
            disabled    Boolean    false    是否禁用
        时间选择器:mode = time
            value    String        表示选中的时间,格式为"hh:mm"
            start    String        表示有效时间范围的开始,字符串格式为"hh:mm"
            end    String        表示有效时间范围的结束,字符串格式为"hh:mm"
            bindchange    EventHandle        value 改变时触发 change 事件,event.detail = {value: value}
            disabled    Boolean    false    是否禁用
        日期选择器:mode = date
            value    String    0    表示选中的日期,格式为"YYYY-MM-DD"
            start    String        表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
            end    String        表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
            fields    String    day    有效值 year,month,day,表示选择器的粒度
            bindchange    EventHandle        value 改变时触发 change 事件,event.detail = {value: value}
            disabled    Boolean    false    是否禁用
    picker-view    内嵌列表选择器
        value    Number Array        数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
        indicator-style    String        设置选择器中间选中框的样式
        indicator-class    String        设置选择器中间选中框的类名
        bindchange    EventHandle        当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)
    slider    滚动选择器
        min    Number    0    最小值
        max    Number    100    最大值
        step    Number    1    步长,取值必须大于 0,并且可被(max - min)整除
        disabled    Boolean    false    是否禁用
        value    Number    0    当前取值
        color    Color    #e9e9e9    背景条的颜色(请使用 backgroundColor)
        selected-color    Color    #1aad19    已选择的颜色(请使用 activeColor)
        activeColor    Color    #1aad19    已选择的颜色
        backgroundColor    Color    #e9e9e9    背景条的颜色
        show-value    Boolean    false    是否显示当前 value
        bindchange    EventHandle        完成一次拖动后触发的事件,event.detail = {value: value}
    switch    开关选择器
        checked    Boolean    false    是否选中
        type    String    switch    样式,有效值:switch, checkbox
        bindchange    EventHandle        checked 改变时触发 change 事件,event.detail={ value:checked}
        color    Color        switch 的颜色,同 css 的 color
    label    标签
        for    String    绑定控件的 id
    textarea   多行输入框
        value    String        输入框的内容
        placeholder    String        输入框为空时占位符
        placeholder-style    String        指定 placeholder 的样式
        placeholder-class    String    textarea-placeholder    指定 placeholder 的样式类
        disabled    Boolean    false    是否禁用
        maxlength    Number    140    最大输入长度,设置为 -1 的时候不限制最大长度
        auto-focus    Boolean    false    自动聚焦,拉起键盘。
        focus    Boolean    false    获取焦点
        auto-height    Boolean    false    是否自动增高,设置auto-height时,style.height不生效
        fixed    Boolean    false    如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
        cursor-spacing    Number    0    指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
        bindfocus    EventHandle        输入框聚焦时触发,event.detail = {value: value}
        bindblur    EventHandle        输入框失去焦点时触发,event.detail = {value: value}
        bindlinechange    EventHandle        输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
        bindinput    EventHandle        当键盘输入时,触发 input 事件,event.detail = {value: value}, bindinput 处理函数的返回值并不会反映到 textarea 上
        bindconfirm    EventHandle        点击完成时, 触发 confirm 事件,event.detail = {value: value}
 

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

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

相关文章

[算法总结] - 蓄水池采样算法

问题描述 在长度为N的数组中&#xff0c;随机等概率选取K个元素&#xff0c;如何实现这个随机算法。 思路很简单&#xff0c;生成一个[0, N]的随机数index&#xff0c;然后返回index上的数值即可。 但是&#xff0c;如果输入是一个长度未知的数组比如stream&#xff0c;先遍历…

IDEA中Tomcat启动web项目

1.首先【Run】-->【Edit Configurations】&#xff0c;进入对应功能界面 2.点击左上角【】&#xff0c;选择Tomcat Server -->Local 3.Name输入自己中意的&#xff0c;下面两个port&#xff0c;保证没被占用就行 4.切到【Deployment】页签&#xff0c;点击【】&#xff…

elk日志分析系统:

elk日志分析系统: elk是一套完整的日志集中处理方案&#xff0c;由三个开源的软件简称组成&#xff1b; E:Easticsearch 简称ES是一个开源的&#xff0c;分布式的存储检索引擎&#xff0c;&#xff08;索引型的非关系数据库&#xff09;存储日志 由java代码开发的&#xff0…

【Java Spring】SpringBoot 五大类注解

文章目录 Spring Boot 注解简介1、五大类注解的作用2、五大类注解的关系3、通过注解获取对象4、获取Bean对象名规则解析 Spring Boot 注解简介 Spring Boot的核心就是注解。Spring Boot通过各种组合注解&#xff0c;极大地简化了Spring项目的搭建和开发。五大类注解是Spring B…

用泰勒展开线性化

在点附近做泰勒展开&#xff1a; 当和很接近的时候&#xff0c;很小&#xff0c;更小&#xff0c;所以可以忽略及后面的高阶项&#xff0c;得到 因为、都是常数&#xff0c;所以等式右边是 x的线性方程&#xff0c;在点附近进行了线性化。 举个例子&#xff1a; 假设 那么做一…

【Linux】安卓端JuiceSSH结合内网穿透实现远程连接服务器

目录 前言1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 前言 处于内网的虚拟机如何被外网访问呢&#xff1f;如何手机就能访问虚拟机呢&#xff1f; 本文介绍 cpolarJuiceSSH 实现手机端远程连接Linux虚拟…

linux 命令 sudo、su 命令

sudo命令详解 1、初识sudo sudo是linux下常用的允许普通用户使用超级用户权限的工具&#xff0c;sudo 用来执行需要提升权限&#xff08;通常是作为 root 用户&#xff09;的命令&#xff0c;允许系统管理员让普通用户执行一些或者全部的root命令&#xff0c;如halt&#xff…

C++中类的静态成员、存储、this、友元和运算符重载

静态成员 在类定义中&#xff0c;它的成员&#xff08;包括成员变量和成员函数&#xff09;&#xff0c;这些成员可以用关键字static 声明为静态的&#xff0c;称为静态成员。 不管这个类创建了多少个对象&#xff0c;静态成员只有一个拷贝&#xff0c;这个拷贝被所有属于这个…

搜索百度可以直接生成代码拉

先看效果图&#xff1a; 使用示例&#xff1a; 比如我要搜索“JS取一个数在两个数更近”的方法&#xff0c;直接搜“JS取一个数在两个数更近”&#xff0c;点击百度一下&#xff0c;就会出现想要的代码&#xff0c;如上图。

网站频频告警故障排查实录

故障描述 位于某Proxmox VE超融合集群上的一个网站频频报警&#xff0c;表现的形式是一会儿服务不可用&#xff0c;一会儿又恢复&#xff08;如下图所示&#xff09;&#xff0c;但同一集群上的其他Web站点未发现异常。 可能的原因 1&#xff09;出口带宽占满。 2&#xff09;…

【技巧】Excel表格如何退出“只读方式”?

如果Excel表格被设置了“只读模式”&#xff0c;那每次打开Excel都会出现对话框提示是否以“只读方式”打开&#xff0c;并且以“只读方式”打开的Excel&#xff0c;如果进行更改是无法保存原文件的。那要如何退出“只读方式”呢&#xff1f; 首先&#xff0c;我们要看下Excel表…

【数据结构】顺序表---C语言版

【数据结构】顺序表 前言&#xff1a;一、线性表二、顺序表1.顺序表的概念及结构&#xff1a;2.顺序表的分类&#xff1a;3.顺序表缺陷&#xff1a; 三、顺序表的代码实现&#xff1a;1.头文件&#xff1a;2.函数文件&#xff1a;3.测试文件&#xff1a; 四、顺序表的相关OJ题&…

私域成交的方式---朋友圈成交

朋友圈不止是生活&#xff0c;也是工作营销的很好场所。朋友圈成交也就是私域成交中养客户成交。和之前的微商相似&#xff0c;微商就是在朋友圈发内容&#xff0c;引起客户的兴趣&#xff0c;再转到1对1私聊进行成交。 适合产品&#xff1a;所有的产品都适合&#xff0c;不管…

Python实现艺术设计?提取图片中颜色并绘制成可视化图表,从大师作品中提取配色方案

文章目录 导入模块并加载图片提取颜色并整合成表格绘制图表实战环节关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠…

android基于UDP实现聊天小功能

一、DatagramSocket DatagramSocket 是 Java 中用于发送和接收 UDP 数据包的类。它提供了创建和管理 UDP 套接字的功能。以下是 DatagramSocket 类的一些常用方法&#xff1a; DatagramSocket(): 创建一个未绑定到特定本地地址和端口的 DatagramSocket 实例。 DatagramSocket…

普乐蛙绵阳科博会一场VR科普航天科学盛宴科普知识

普乐蛙绵阳科普展&#xff1a;一场科学盛宴&#xff0c;点燃孩子探索欲望的火花! 普乐蛙绵阳科普展正在如火如荼地进行中&#xff0c;吸引了无数孩子和家长的热情参与。这场科普盛宴以独特的内外视角&#xff0c;让人们感受到科学的魅力&#xff0c;激发了孩子们对知识的渴望和…

蚁剑低版本反制

蚁剑低版本反制 漏洞概述 中国蚁剑是一款开源的跨平台网站管理工具&#xff0c;它主要面向于合法授权的渗透测试安全人员以及进行常规操作的网站管理员。影响范围 AntSword <2.0.7 蚁剑实验版本&#xff1a;2.0.7 环境搭建&#xff1a; 172.16.1.233&#xff08;蓝队服…

如何在 Photoshop 中制作金像

如何使用渐变贴图和一些鲜为人知的 Photoshop 图像效果在 Photoshop 中制作金像 1. 如何为图像添加噪点 步骤 1 首先&#xff0c;将“颜色填充”图层设置为淡蓝色 #a9c9dd 颜色。 步骤 2 接下来&#xff0c;让我们右键单击>创建智能对象&#xff0c;以防万一我们以后想要…

【EasyExcel】导出excel并支持自定义设置数据行背景颜色等

需求背景&#xff1a; 根据查询条件将列表数据导出&#xff0c;并筛选出满足某个条件的数据&#xff0c;将满足条件的数据的背景颜色设置成黄色。 &#xff08;本文例子如&#xff1a;name出现的次数大于等于2&#xff0c;将相关数据背景颜色都设置为黄色&#xff09; …

代码签名证书是如何保护软件?

随着互联网的普及和技术的发展&#xff0c;软件开发已经成为了一个非常重要的行业。然而&#xff0c;软件安全问题也日益凸显&#xff0c;恶意软件、病毒、木马等威胁着用户的数据安全和隐私。为了确保软件的安全和可靠性&#xff0c;开发者需要采取一系列措施来保护他们的产品…