微信小程序-表单
wxml
<view> 按钮: <button size="{{buttom.size}}" type="{{buttom.type}}" plain="{{buttom.plain}}" disabled="{{buttom.disabled}}" loading="{{buttom.loading}}" >实例按钮</button> </view> <view> <button bindtap="setSize" size="mini" type="primary" plain="{{true}}" >改变大小</button> <button bindtap="setType" size="mini" type="warn" plain="{{false}}" >改变样式</button> <button bindtap="setLoading" size="mini" type="warn" plain="{{true}}" >带loading</button> <button bindtap="setDisabled" size="mini" type="default" plain="{{false}}" >禁用按钮</button> <button bindtap="setPlain" size="mini" type="default" plain="{{false}}" >改变背景</button> </view> <view> 多选框: <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>{{item.value}} </label> </checkbox-group> </view> <view> form: 可以提交 switch input checkbox slider radio picker 标签 <form bindsubmit="formSubmit" bindreset="onreset" id='a2'> <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" /> <input name="input2" type="number" placeholder="please input here" /> <input name="input3" type="idcard" placeholder="please input here" /> <input name="input4" type="digit" placeholder="please input here" /> <input name="input4" type="date" placeholder="please input here" /> <input name="input4" type="time" placeholder="please input here" /> </view> <view class="section section_gap"> <view class="section__title">radio</view> <radio-group name="radio-group"> <label><radio value="radio1"/>radio1</label> <label><radio value="radio2"/>radio2</label> </radio-group> </view> <view class="section section_gap"> <view class="section__title">checkbox</view> <checkbox-group name="checkbox"> <label><checkbox value="checkbox1"/>checkbox1</label> <label><checkbox value="checkbox2"/>checkbox2</label> </checkbox-group> </view> <view class="btn-area"> <button formType="submit">Submit</button> <button formType="reset" >Reset</button> </view> </form> 表单提交的数据:{{formdata}} </view> <view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> </view> <view class="section"> <view class="section__title">时间选择器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker> </view> <view class="section"> <view class="section__title">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker> </view>
js
var type=["primary","default","warn"]; var app = getApp() var pageObject = { data: { array: ['美国', '中国', '巴西', '日本'], index: , date: '2016-09-01', time: '12:01', formdata:'', items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本',disabled:'false'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ], buttom:{size:"default","type":"default","plain":false,"disabled":false,"loading":false} }, //改变大小 setSize:function (e){ if(this.data.buttom.size=="mini"){ this.data.buttom.size="default"; }else{ this.data.buttom.size="mini"; } this.setData({ buttom:this.data.buttom }) }, //改变样式 setType:function (e){ ,); this.data.buttom.type=type[key]; this.setData({ buttom:this.data.buttom }) }, //设置loading setLoading:function (e){ this.data.buttom.loading=!this.data.buttom.loading this.setData({ buttom:this.data.buttom }) }, //设置禁用按钮 setDisabled:function (e){ this.data.buttom.disabled=!this.data.buttom.disabled this.setData({ buttom:this.data.buttom }) }, //设置背景 setPlain:function (e){ this.data.buttom.plain=!this.data.buttom.plain this.setData({ buttom:this.data.buttom }) }, //选择多选框的时候触发 checkboxChange: function(e) { var number = '选择了'+e.detail.value.length.toString()+'个'; }; wx.showToast(obj) }, //重置表单 onreset: function(e) { wx.showToast({ title:'重置表单成功', icon: 'success', duration: }) }, //点击提交是触发 formSubmit:function (e){ console.log(e.detail.value) var a = e.detail.value; this.setData({ formdata:a }) } } Page(pageObject);
微信小程序-表单的更多相关文章
- 微信小程序——表单验证插件WxValidate的二次封装(终极版)
微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...
- 微信小程序——表单验证插件WxValidate的二次封装(二)
在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...
- 微信小程序-表单组件
button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...
- 微信小程序-表单笔记
发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'searc ...
- 微信小程序 - 表单验证插件WxValidate使用
插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/w ...
- 微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)
弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可) WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit='s ...
- 微信小程序-表单笔记2
本地添加4张图片并显示至页面——组件位置.设置样式.列表渲染 Q.button是一张图片,需要实现点击这张图片后选择本地图片后显示至页面,不知道怎么让本地图片将button挤到右边 S.在wxml中 ...
- 微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)
js代码 Page({ /** * 页面的初始数据 */ data: { indicatorDots: false, ...
- 小程序 表单 获取 formId
微信小程序使用模板消息需要使用支付prepay_id或表单提交formId, 要获得 formId 需要在 form 标签中声明属性 report-submit="true" ...
随机推荐
- 搭建git for windows服务器(100%可以成功)
既然Git在Linux下面非常好用,为什么还要搭建git windows的服务器,因为不是所有的用户都需要在linux下面做开发,对吧,还有很多用户选择使用windows做开发. 看到很多网友尝试部分 ...
- jsp页面传参大汇总-转帖收藏
http://blog.csdn.net/ssy_shandong/article/details/9328985/
- linux上监控tomcat down掉后自动重启tomcat
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
- Android MVP + 泛型,实现了友好VP交互及Activity潜在的内存泄露的优化
Android MVP粗来已经有段时间了,在项目中我也多多少少用了一些,不得不说代码使用这种模式后,条例确实清晰了好多,整个流程看起来有点各司其职的感觉(另一种的java面向对象的方式). 不过这里是 ...
- Media Queries使用方法
1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...
- 论文阅读(Lukas Neuman——【ICDAR2015】Efficient Scene Text Localization and Recognition with Local Character Refinement)
Lukas Neuman--[ICDAR2015]Efficient Scene Text Localization and Recognition with Local Character Refi ...
- 全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...
- 浅谈JDBC编程
一.概述 1.为什么要用JDBC 数据库是程序不可或缺的一部分,每一个网站和服务器的建设都需要数据库.对于大多数应用程序员(此处不包含数据库开发人员)来说,我们更多的不是在DBMS中对数据库进行操纵, ...
- Office2010安装错误1402问题(我安装成功了)
转载:http://blog.sina.com.cn/s/blog_555ea2470101831d.html 做个记录. 1.卸载OFFICE 使用工具 MicrosoftFixit,Window ...
- 【转】Android各大发布市场
前言 如果只有一个或者少许的两三个Android市场,本文也没用存在的必要性,本文谨献给同在Android奋战的同仁. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnbl ...