微信小程序组件form
表单组件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的更多相关文章
- 微信小程序组件设计规范
微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...
- 微信小程序组件学习 -- 注册页面
微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- 微信小程序——组件(二)
在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...
- 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 详解封装微信小程序组件及小程序坑(附带解决方案)
一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...
- 微信小程序组件通信
父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...
- 微信小程序组件化实践
Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...
随机推荐
- redisson笔记
简介 Redisson - 是一个高级的分布式协调Redis客服端,能帮助用户在分布式环境中轻松实现一些Java的对象 (Bloom filter, BitSet, Set, SetMultimap, ...
- ffmpeg 日志系统av_log()
一般使用Error, Warning, Debug3个级别即可(见下面的颜色).AV_LOG_QUIET 核心函数只有一个:av_log().使用av_log()在控制台输出日志的效果如下图所示. a ...
- struts中如何实现国际化,涉及哪些文件?
struts中如何实现国际化,涉及哪些文件? 解答:“国际化”是指一个应用程序在运行时能够根据客户端请求所来自的国家/地区.语言的不同而显示不同的用户界面.Struts框架通过使用<bean:m ...
- Java IO系统
理论上,我们可将任何程序分割为三部分:输入.处理和输出.这意味着 IO(输入/输出)是所有程序最为关键的部分.在这一章中,大家将学习Java 为此提供的各种类,如何用它们读写文件.内存块以及控制台 等 ...
- 在Intellij IDEA下用X-debug调试PHP
用Intellij IDEA使用X-debug来调试PHP,主要需要配置的部分有三个地方,分别为php.ini的配置,IDEA的配置和浏览器的配置,主要如下: php.ini(wamp修改的是phpF ...
- vue项目创建步骤小结
第一步创建项目目录demo cd demo npm init 生成package.json 初始化项目工具使用 命令行工具 (CLI) 快速初始化 # 全局安装 vue-cli $ npm inst ...
- 编写高质量代码–改善python程序的建议(二)
原文发表在我的博客主页,转载请注明出处! 建议七:利用assert语句来发现问题断言(assert)在很多语言中都存在,它主要为调试程序服务,能够快速方便地检查程序的异常或者发现不恰当的输入等,可防止 ...
- 【MarkDown】使用Html样式和折叠语法
MarkDown很方便,但基本语法有些不足:比如无法使用折叠语法,无法让文字有不同的颜色. 这些功能可以实现,不过需要使用Html语法进行扩展.这篇文章主要是整理一下这些技巧,方便更好的使用. 一.折 ...
- Apache-ActiveMQ transport XmlMessage
前言 本文原创,转载请说明出处! Apache-ActiveMQ:是Apache提供的一款开源的消息传送服务,不论是安装还是使用都非常简单实用,可以作为消息缓存管理器来使用(个人观点),看看Activ ...
- StackExchange.Redis性能调优
大家经常出现同步调用Redis超时的问题,但改成异步之后发现错误非常少了,但却可能通过前后记日志之类的发现Redis命令非常慢. PS: 以后代码都在Windows bash中运行,StackExch ...