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. 为什么说Python采用的是基于值的内存管理模式?

    Python中的变量并不直接存储值,而是存储了值的内存地址或者引用,假如为不同变量赋值为相同值,这个值在内存中只有一份,多个变量指向同一块内存地址.

  2. leecode刷题(29)-- 二叉树的中序遍历

    leecode刷题(29)-- 二叉树的中序遍历 二叉树的中序遍历 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 思路 跟 ...

  3. 微信小程序使用页面栈改变上一页面的数据

    微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...

  4. powerDisgner 数据类型对比

    powerDisgner 16.5版本支持一下类型数据模型格式 以下数字数据类型可用: Standard data type DBMS-specific physical data type Cont ...

  5. 25 Python之模块与包

    一.模块   模块就是一个包含了python定义和申明的文件,文件名就是模块的名字加上.py的后缀/ 模块的分类:     1.使用python编写的py文件     2.已被编译位共享库或者DLL或 ...

  6. Centos7:JDK1.8环境配置

    1.将压缩包解压缩 tar -zxvf jdk-8u181-linux-x64.tar.gz; 2.配置环境变量 环境变量地址:/etc/profile #set java environment J ...

  7. Nginx的快速安装

    1. 准备工作 1. CenterOS7.x.vmware虚拟机,安装过程参考 https://jingyan.baidu.com/article/eae0782787b4c01fec548535.h ...

  8. Navicat连接Mysql11.1.13出现1251错误

    打开Navicat软件,单击左上角[连接]按钮,选择mysql,弹出新建连接,输入相关信息,单击[连接测试],报1251的错误,如下图所示: 根因分析: mysql8 之前的版本中加密规则是mysql ...

  9. poj 1953 World Cup Noise (dp)

    World Cup Noise Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16774   Accepted: 8243 ...

  10. 网络初级篇之OSPF(一)原理

    一.OSPF是什么 Open Shortest Path First, 开放最短路径优先协议,是一种开源的使用最短路径优先(SPF)算法的内部网关协议(IGP).常用于路由器的动态选路. 二.OSPF ...