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. CVE-2018-18955漏洞学习

    简介 这是名称空间的漏洞,文章先介绍user namespaces的简单只是,然后从补丁入手,分析源码,找到漏洞出现的原因.因为对这块的源码不是那么熟悉,所以着重描述源码分析的部分,其他可以参考末尾的 ...

  2. qt webengineview 加载本地资源方式

    一.如果把资源添加到本地资源qrc库里了,请使用 ui->preview->setUrl(QUrl("qrc:/HelloWorld2.html")): 二.如果没有现 ...

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

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

  4. linux命令详解——lsof

    lsof全名list opened files,也就是列举系统中已经被打开的文件.我们都知道,linux环境中,任何事物都是文件, 设备是文件,目录是文件,甚至sockets也是文件.所以,用好lso ...

  5. nginx反向代理实现后端web的读写分离

    1.环境 角色 ip 主机名 负载均衡节点 10.0.0.11 nginx-lb01 可读写web01节点 10.0.0.12 nginx-web01 只读web02节点 10.0.0.13 ngin ...

  6. 安全专家发现GE Multilin SR的一个关键漏洞对全球电网构成严重威胁。

    A team of researchers from New York University has found a serious vulnerability in some of GE Multi ...

  7. 图书管理系统UML建模

    图书管理系统UML建模 用例图 借阅者请求服务用例图 图书管理员处理借书还书用例图 系统管理员系统维护用例图 时序图 系统管理员添加书籍时序图 协作图 借阅者预留书籍协作图 状态图 书的状态图 活动图 ...

  8. PAT Basic 1019 数字黑洞 (20 分)

    给定任一个各位数字不完全相同的 4 位正整数,如果我们先把 4 个数字按非递增排序,再按非递减排序,然后用第 1 个数字减第 2 个数字,将得到一个新的数字.一直重复这样做,我们很快会停在有“数字黑洞 ...

  9. 浙大数据结构课后习题 练习三 7-4 List Leaves (25 分)

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...

  10. 百度网盘,FTP上传异常、上传失败的解决办法

    若你的宽带上传上限速度为50KB,那么将百度网盘或FTP的上行速度调为50KB以下即可,就不会出现网络异常的情况了.