小程序表单组件——button

简介: 小程序表单组件——button

表单组件

button

button | 微信开放文档

按钮相关的属性,wxml 中的定义

<button size="mini" type="primary" loading="true">按钮</button>
<button size="mini" type="warn" plain="true" bindtap="changeDisabled" hover-class="other-button-hover">启用</button>
<button size="mini" type="primary" disabled="{{disabledBol}}">按钮</button>

为 hover-class 设置的样式,wxss 中的定义

.other-button-hover {
  opacity: 0.2;
}

控制按钮是否屏蔽的 js

changeDisabled: function() {
    this.setData({
        disabledBol: false
    })
},

控制的变量

Page({
  /**
   * 页面的初始数据
   */
  data: {
    disabledBol: true,

button 的 form-type 属性

wxml 中的代码

<form bindsubmit="subFn" bindreset="resetFn">
  <input type="text" name="txtName" />
  <button form-type="submit">提交</button>
  <button form-type="reset">重置</button>
</form>

js 中的代码

resetFn: function() {
    console.log('点击重置了')
},
subFn: function(e) {
    console.log('提交表单:', e.detail.value)
},


相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
1月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
39 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
1月前
|
小程序
微信小程序-其他常用组件
该内容是关于微信小程序组件的介绍,主要包括`button`、`image`和`navigator`。`button`组件比HTML的按钮功能更丰富,通过`open-type`可调用微信功能,如客服、转发等。组件属性包括类型(如`primary`、`warn`)和尺寸(`size`)。`image`组件默认宽300px,高240px,支持设置属性来调整显示效果。`navigator`组件用于页面导航,类似HTML的a标签,常用于页面间的跳转。
24 0
|
1月前
|
小程序
微信小程序-常用的基础内容组件
以下是内容的摘要: 本文介绍了微信小程序中几个重要的组件:text、rich-text和progress。text组件类似于HTML的span标签,用于显示文本,通过selectable属性可实现长按选中文本。rich-text组件能够将HTML字符串渲染成WXML结构,展示富文本内容。progress组件则用于展示进度条,支持不同状态(如成功、警告、等待等)以及自定义颜色和宽度。icon组件则提供了一组预定义的图标,可用于表示各种操作状态或提示信息。
20 0
|
1月前
|
小程序 前端开发 定位技术
微信小程序-常用的视图容器类组件
该内容是关于微信小程序组件的分类和部分具体组件的介绍。主要分为9大类:视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件、画布组件、开放能力和无障碍访问。其中详细讲解了`view`、`scroll-view`、`swiper`及`swiper-item`等组件的用途和示例。`view`用于构建页面布局,`scroll-view`支持滚动效果,`swiper`则用于创建轮播图。此外,还提到了`root-portal`、`page-container`等其他特殊用途的组件。
22 0
|
1月前
|
小程序 JavaScript
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
|
11天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
20 6
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
19 3