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. 一些通用的js工具类,添加自定义插件

    common_t.js /** * 通用工具组件 对原有的工具进行封装,自定义某方法统一处理<br> * ^_^ * * Author: em.D * Date: 2016-05-17 * ...

  2. A Horrible Poem (字符串hash+数论)

    # 10038. 「一本通 2.1 练习 4」A Horrible Poem [题目描述] 给出一个由小写英文字母组成的字符串 $S$,再给出 $q$ 个询问,要求回答 $S$ 某个子串的最短循环节. ...

  3. html重置模板

    新浪的初始化: html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img { margin: 0; paddin ...

  4. redis 学习(9)-- redis 客户端 -- redis-py

    redis 客户端 -- redis-py 简介 关于 redis 的各种客户端,我们可以在官网上寻找并使用,比如我这里的 python 客户端,可以在官网上找到:redis-client . 获取 ...

  5. C++ 对象构造顺序、构析函数、临时对象。

    对象的构造顺序: 1.对于局部对象,构造顺序是根据程序执行流进行构造,从上到下. #include <stdio.h> class Test { int mi; public: Test( ...

  6. sql server delete语句

    delete语句 --DELETE 语句用于删除表中的行 语法:delete from 表名称 where 列名称 = 值 --可以在不删除表的情况下删除所有的行.这意味着表的结构.属性和索引都是完整 ...

  7. 计算机网络:这是一份全面 & 详细 的TCP协议学习指南

    原文链接:blog.csdn.net 用这个媒体播放器组件,实时互动时也可共同观看本地视频juejin.im 前言 计算机网络基础 该是程序猿需掌握的知识,但往往会被忽略 今天,我将详细讲解计算机网络 ...

  8. 5.(基础)tornado异步

    终于到了传说中的异步了,感觉异步这个名字听起来就很酷酷的,以前还不是多擅长Python时,就跑去看twisted的源码,结果给我幼小的心灵留下了创伤.反正包括我在内,都知道异步编程很强大,但是却很少在 ...

  9. deep_learning_Function_numpy_argmax()函数

    numpy里面的argmax函数 函数原型:def argmax(a, axis=None, out=None)a----输入arrayaxis----为0代表列方向,为1代表行方向out----结果 ...

  10. 关于order_by