微信小程序 slider 详解及实例代码


Posted in Javascript onJanuary 10, 2017

微信小程序slider

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 slider 详解及实例代码

滑动选择器

属性名 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
step Number 1 步长,取值必须大于 0,并且可被 (max - min) 整除
disabled Boolean false 是否禁用
value Number 0 当前取值
show-value Boolean false 是否显示当前value
bindchange EventHandle   完成一次拖动后触发的事件,event.detail = {value:value}

示例代码:

<view class="section section_gap">
 <text class="section__title">设置left/right icon</text>
 <view class="body-view">
 <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">设置step</text>
 <view class="body-view">
 <slider bindchange="slider2change" step="5"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">显示当前value</text>
 <view class="body-view">
 <slider bindchange="slider3change" show-value/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">设置最小/最大值</text>
 <view class="body-view">
 <slider bindchange="slider4change" min="50" max="200" show-value/>
 </view>
</view>
var pageData = {}
for(var i = 1; i < 5; ++i) {
 (function (index) {
 pageData[`slider${index}change`] = function(e) {
 console.log(`slider${index}发生change事件,携带值为`, e.detail.value)
 }
 })(i);
}
Page(pageData)

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 #Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
You might like
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
bootstrap Table实现合并相同行
2019/07/19 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
记录Django开发心得
2014/07/16 Python
Python循环结构的应用场景详解
2019/07/11 Python
如何用python处理excel表格
2020/06/09 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
青年创业培训欢迎词
2014/01/08 职场文书
单位提档介绍信
2014/01/17 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
催款律师函范文
2015/05/27 职场文书
2015年教师节主持词
2015/07/03 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers