表单组件form:官方文档

Demo Code:

Page({
formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件')
}
})

JS

<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view> <view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label class="checkbox"><radio value="radio1"/>radio1</label>
<label class="checkbox"><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label class="checkbox"><checkbox value="checkbox1"/>checkbox1</label>
<label class="checkbox"><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>

WXML

.section__title{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:5px;
}
label{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.section_gap{
margin-top: 10px;
}
.checkbox{
display:block;
margin-left:10px;
margin-top:5px;
}

WXSS

微信小程序组件form的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  4. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  5. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  6. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  7. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  8. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  9. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

随机推荐

  1. MapReduce实战(三)分区的实现

    需求: 在实战(一)的基础 上,实现自定义分组机制.例如根据手机号的不同,分成不同的省份,然后在不同的reduce上面跑,最后生成的结果分别存在不同的文件中. 对流量原始日志进行流量统计,将不同省份的 ...

  2. Visual Studio 2017 RC使用初体验

    .NET Core新式,高效,特别适合用于大规模的Web应用:而传统的.NET Framework则非常适合用于开发Windows桌面应用程序. 一 安装 请下载Visual Studio 2017 ...

  3. 再来一个expect脚本

    [root@jenkins scripts]# cat expect_test1205.sh #!/usr/bin/expect ################################### ...

  4. Centos7安装Apache Http服务器无法访问如何解决

    1. 安装Apache组件 [root@mycentos shell]# yum install httpd 2. 安装成功后,检测有无httpd进程 [root@mycentos shell]# p ...

  5. 把查询到结果合并放在一行 JOIN非union

    select one.max,one.min,one.low sts,c.high ens,one.time from ( select a.max max,a.min min,b.low low,a ...

  6. 例举在诊断Oracle性能问题时,常用的工具、方法

    例举在诊断Oracle性能问题时,常用的工具.方法 解答: 1)简单一点的可以用toad及dbartisan这样的工具. 2)纯做性能监测,比较出色的有spolight和emc的I3,这两个软件都比较 ...

  7. scheme 中的宏使用

    #lang scheme ( define-syntax my-when     ( syntax-rules ()       [ ( _ pred body ... )         ( if ...

  8. 探讨instanceof实现原理,并用两种方法模拟实现 instanceof

    在开始之前先了解下js数据类型 js基本数据类型: null undefined number boolean string js引用数据类型: function object array 一说ins ...

  9. 【爱江山越野跑】ITRA积分认证流程

    背景:目前在越野跑领域,高级别的赛事有很多,比如UTMB,TDG等,而想报名参与这些赛事需要一定的积分(ITRA积分), 而这些积分的获得,需要参与获得ITRA认证的赛事,赛事难度不同,获得的积分也不 ...

  10. 复合文档(Compound Document)读写栗子

    复合文件是把磁盘文件系统的管理方式移植到文件中---复合文件. 复合文档是由 Windows 系统通过 COM 提供的, 它能完成像 Windows 目录结构一样复杂的文件结构的存取:提示一下 Win ...