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. # 组合数学-组合数+lacus定理

    目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 数论-组合数+lacus定理 组合数计算 为避免爆long long,\(20!\)就达到了long long 的范围,采 ...

  2. (转)当margin-top、padding-top的值为百分比时是如何计算的?

    本文链接:https://blog.csdn.net/qq_27437967/article/details/72625900问题:当margin-top.padding-top的值是百分比时,分别是 ...

  3. Django进阶(一)

    目录 choice参数 MTV与MVC模型 Ajax Ajax传json数据 Ajax传file数据 contentType前后端传输数据编码 ajax + sweetalert 序列化组件 补充 c ...

  4. 实现一台Linux电脑连接另一台Linux(SSH实现linux之间的免密码登陆)

    怎么实现一台Linux电脑连接另一台Linux电脑? 首先查看是否安装ssh服务:systemctl status sshd.service 启动服务:systemctl start sshd.ser ...

  5. Codeforces 1190A. Tokitsukaze and Discard Items

    传送门 显然从左到右考虑每个要删除的数 维护一个 $cnt$ 表示之前已经删除了 $cnt$ 个数,那么当前所有要删除数的实际位置就要减去 $cnt$ 直接暴力枚举哪些数在最左边一个块然后一起删除 每 ...

  6. tasks.json 配置 解决vscode控制台乱码问题

    { "version": "2.0.0", "command": "dotnet", "tasks" ...

  7. eclipse 保存web.xml 和 loading description from 问题的解决

    Eclipse 版本为 2019-06 (4.12.0) 发现开启的时候一直有loading description from ***  ,这个loading description 是web项目加载 ...

  8. ccs之经典布局(三)(等分,等高布局)

    接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...

  9. SuperMap-WebGL-坐标系及转换说明

    转载自:https://blog.csdn.net/supermapsupport/article/details/89519310 一.坐标系介绍我们先来列举下Cesium中的坐标系:WGS84经纬 ...

  10. Hbase1.4.9的安装

    HBase介绍 HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HB ...