微信小程序-表单
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" ...
随机推荐
- kafka集群搭建和使用Java写kafka生产者消费者
1 kafka集群搭建 1.zookeeper集群 搭建在110, 111,112 2.kafka使用3个节点110, 111,112 修改配置文件config/server.properties ...
- Python学习笔记(基本功能的使用)
整理了以前使用的几个笔记:上传到了github; python_notes 以后在慢慢更新吧:
- 区间K 大数查询
算法训练 区间k大数查询 时间限制:1.0s 内存限制:256.0MB 问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列 ...
- 最简单的基于JSP标准标签库的增删改查
创建数据库中的表:CREATE TABLE `websites` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` char(20) NOT NULL DE ...
- linux学习第一天
linux touch 文件名mkdir -P 路径文件 cat 打开文件 vihostname 主机名ln 复制 ln -s 快捷方式cp 复制-r复制整个目录-p保持源文件属性不变-f强制复制mv ...
- JS 数组迭代方法
var arr = [3,4,5,6,7,"a"]; var isNum = function(elem,index,AAA){return !isNaN(elem);} var ...
- windows shell api SHEmptyRecycleBin 清空回收站
HRESULT SHEmptyRecycleBin( HWND hwnd, LPCTSTR pszRootPath, DWORD dwFlags ); hwnd 父窗口句柄 pszRootPath 将 ...
- web后端 文件上传
需要Commons-fileupload和commons-io两个jar包.可搜索apache commons下载 jar复制在项目下的web->WEB-INF->lib下 复制在a ...
- Windows Phone 六、JSON序列化
JSON序列化 public class Person { public int Id { get; set; } public string Name { get; set; } public in ...
- Microsoft SQL Server 数据库服务器管理维护角色
固定服务器角色: 按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述: Bulkadmin:这个服务器角色的成员可以运行BULK INSERT语句.这条语句允 ...