Form表单、switch开关、数值选择器效果  官方文档:传送门

  点击提交表单(按钮,提交开关,数值选择器,输入文本中)的值,显示在控制台上,点击重置,重置表单中的值。

实现过程

  form表单,添加form-type属性到表单上

<form bindsubmit="formSubmit" bindreset="formReset">

    <switch name="switch"/>

    <slider name="slider" show-value ></slider>

    <input name="input" placeholder="please input here" />

    <button form-type='submit'>提交</button>
<button form-type='reset'>重置</button> </form>

  添加formSubmit和formReset函数,实现提交/重置表单函数

  formSubmit:function(e){
console.log(e);
}, formReset:function(){
console.log(e);
}

  表单中有值时,控制台显示提交表单的值

value
input:"Gary"
slider:52
switch:true

  重置表单后,表单中没有值时,控制台显示提交表单的值

value
input:“”
slider:“”
switch:false

微信小程序_(组件)form表单的更多相关文章

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

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

  2. 微信小程序_(组件)icon、text、rich-text、progress四大基础组件

    微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...

  3. 微信小程序_(组件)可拖动movable-view

    微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...

  4. 微信小程序_(组件)scroll-view可滚动视图

    微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...

  5. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

  6. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  7. 微信小程序_(组件)picker

    picker组件效果 官方文档:传送门 Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美 ...

  8. 微信小程序_(组件)组件基础

    (progress.text.block) 组件基础效果 官方文档:传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", ...

  9. 微信小程序_(组件)canvas画布

    canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...

随机推荐

  1. file_put_contents实现内容追加

    file_put_contents("test.txt", "This is another something.", FILE_APPEND); FILE_A ...

  2. 基于EPICS实现西门子S7通信

    (1)       EPICS官网下载Demo并复制文件到指定位置 (2)       创建Modules文件夹,wget https://epics.anl.gov/download/modules ...

  3. c# 不让窗体显示在alt tab中

    protected override CreateParams CreateParams { get { const int WS_EX_APPWINDOW = 0x40000; const int ...

  4. document.body.scrollTop无效的解决方法

    1.document.body.scrollTop = 0 有时候不生效,两种解决方案,试试看. 1-1.设置:document.documentElement.scrollTop = 0;1-2.设 ...

  5. concurrent.futures:线程池,让你更加高效、并发的处理任务

    并发任务池 concurrent.futures模块提供了使用工作线程或进程池运行任务的接口. 线程池和进程池的API是一致的,所以应用只需要做最小的修改就可以在线程和进程之间进行切换 这个模块提供了 ...

  6. deep_learning_Function_matpotlib_scatter()函数

    plt.scatter()函数用于生成一个scatter散点图. matplotlib.pyplot.scatter(x, y, s=20, c='b', marker='o', cmap=None, ...

  7. php+ajax远程加载避免重复提交

    近日在练习签到送积分功能时,发现可以在一瞬间的时候提交好多次 导致可以重复领取多次积分 除了增加请求限制之外 发现ajax提交没有限制重复提交 遂立此贴为警示 首先上表单代码 <form ons ...

  8. Summer training round2 #10(Training 30)

    A:签到题 B!:搜索+DP #include<bits/stdc++.h> #define mp make_pair #define pi pair<int,int> usi ...

  9. 记录一个url_for的用法

    使用url_for生成url时,需要将url协议从http换成https时,就可以通过在函数中增加参数实现: url_for('secure_thingy', _external=True, _sch ...

  10. JS 转化为String的三种方法

    // 1. toString() var num = 8; var numString = num.toString(); console.log(numString); var result = t ...