微信小程序开发实战(12):滑杆组件(slider)和form组件
1. 滑杆组件(slider)
slider组件用于通过滑杆改变数值,该组件有如下几个属性。
min:Number类型,默认值是0,表示滑杆能滑动的 最小值
max:Number 类型,默认值是100,表示滑杆能滑动的最大值
step:Number类型,默认值是1,表示滑杆滑动的步长,取值必须大于0,并且可被max - min整除
disabled:Boolean类型,默认值是false,表示slider组件是否禁用
value:Number类型,默认值是0,slider组件当前的值
show-value:Boolean类型,默认值是false,表示是否显示当前的值(在slider组件的右侧显示)
bindchange:EventHandle类型, 完成一次拖动后触发的事件(假设event是事件触发的函数的参数),event.detail.value可获取当前的值
下面的布局代码放置了3个slider组件,第一个slider组件设置了step属性值为5,并没有指定show-value属性,所以第一个slider组件不会在右侧显示当前的值。后两个slider组件都设置了show-value属性,所以这两个slider组件可以在右侧显示当前的值。
<view style="margin:20px"> <view style="margin:20px"> <text style="margin:15px">设置step</text> <slider value="60" bindchange="slider1change" step="5" /> </view> <view style="margin:20px"> <text style="margin:15px">显示当前value</text> <slider value="50" bindchange="slider2change" show-value/> </view> <view style="margin:20px"> <text style="margin:15px">设置最小/最大值</text> <slider value="100" bindchange="slider3change" min="50" max="200" show-value/> </view></view>
布局的效果如图1所示。
图1 slider组件
完整的JavaScript实现代码如下:
var pageData = {}for(var i = 1; i < 4; ++i) { (function (index) { pageData[`slider${index}change`] = function(e) { console.log(`slider${index}发生change事件,携带值为`, e.detail.value) } })(i);}Page(pageData)
这段代码通过循环,动态生成了3个事件函数(slider1change、slider2change和slider3change),当滑动slider组件的滑杆时,会在Console中输出如图2所示的日志信息。
图2 滑动slider滑杆时在Console的输出结果
2. form组件
form组件用于提交用户的输入的内容(通过switch、input、checkbox、slider等组件输入),待提交的组件必须在form组件内部。这里的提交,实际上是当点击formType属性为submit的button组件时,将录入的信息提交给一个函数,通过该函数的参数可以获取用户提交的内容,每一部分内容需要用待提交组件的name属性值作为key。form组件还可以通过点击formType属性值为reset的button组件将录入的内容重置。
form组件有如下几个属性。
- report-submit:Boolean类型,是否返回formId用于发送模板消息
- bindsubmit:EventHandle类型,指定提交触发的函数名称,通过event.detail.value可获得提交的内容
- bindreset:EventHandle类型,指定重置触发的函数名,该函数的参数不能通过event.detail.value获取提交的内容(value未定义),只能通过event.detail获取form组件本身
下面的布局文件演示了form组件的使用方法。
<view style="margin:30px"> <form catchsubmit="formSubmit" catchreset="formReset"> <switch name="switch" checked="true" /> <slider style="margin-top:20px" name="slider" show-value></slider> <input style="margin-top:20px" name="input" placeholder="please input here" /> <radio-group style="margin-top:20px" name="radio-group"> <label> <radio value="radio1" />radio1</label> <label> <radio value="radio2" />radio2</label> </radio-group> <view style="margin-top:20px"> <checkbox-group name="checkbox"> <label> <checkbox value="checkbox1" />checkbox1</label> <label> <checkbox value="checkbox2" />checkbox2</label> </checkbox-group> </view> <view style="margin-top:20px"> <button formType="submit">Submit</button> <button formType="reset" style="margin-top:20px">Reset</button> </view> </form></view>
装载该布局文件后,将窗口的组件设置一定的值,如图3所示。
图3 form的显示效果
要注意的是,如果要用form提交,checkbox组件必须包含在checkbox-group组件中,而且checkbox-group必须指定name属性,否则无法通过submit事件的参数获得checkbox提交的值。
完整的JavaScript实现代码如下:
Page({ formSubmit: function(e) { console.log('form发生了submit事件,携带数据为:', e.detail.value) }, formReset: function(e) { console.log('form发生了reset事件,携带数据为:', e.detail) }})
现在点击Submit按钮,然后点击Reset按钮,会看到Console中输出如图4所示的日志信息。其中checkbox组件返回了一个数组,本例只选中一个checkbox组件,所以数组长度为1,数组元素值为checkbox1(value属性的值)。
图4 提交和重置后输出的日志信息
- 5分钟教你玩转 sklearn 机器学习(上)
- WebSocket系列之socket.io
- Python 数据分析学习笔记
- ERP管理软件系统设计方案
- 腾讯云GAME-TECH沙龙——全球同服游戏语音解决方案
- 【Scikit-Learn 中文文档】双聚类 - 无监督学习 - 用户指南 | ApacheCN
- ASP.NET MVC的客户端验证:jQuery的验证
- RxJava系列一
- ASP.NET MVC涉及到的5个同步与异步,你是否傻傻分不清楚?[上篇]
- 被遗忘的软件产品形态
- 区块链是什么,一文给您讲清楚
- ASP.NET MVC涉及到的5个同步与异步,你是否傻傻分不清楚?[下篇]
- 2017科技颠覆生活哪家强?
- 柯洁宣布复出,再次迎战AI!但对手不再是阿尔法狗……
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发中Button组件的使用
- Android开发之基于RecycleView实现的头部悬浮控件
- Android如何通过命令行操作Sqlite3数据库的方法
- Android实现沉浸式状态栏功能
- PHP对验证码的认证过程
- Android实现图片加载进度提示
- android shape实现阴影或模糊边效果
- Spring Data JPA主键采用UUID策略
- Android自定义控件之水平圆点加载进度条
- Android屏幕旋转之横屏竖屏切换的实现
- Android Studio连接SQLite数据库的登录注册实现
- Android 获取 usb 权限的两种方法
- Android实现两圆点之间来回移动加载进度
- Android使用第三方库实现日期选择器
- Android Activity向右滑动返回