微信小程序 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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
ie 调试javascript的工具
Apr 29 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
js 操作css实现代码
2009/06/11 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
详解python3百度指数抓取实例
2016/12/12 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
python爬取抖音视频的实例分析
2021/01/19 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
中学老师的自我评价
2013/11/07 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
体育教师个人工作总结
2015/02/09 职场文书
辞职信范文大全
2015/03/02 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
浅谈python中的多态
2021/06/15 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS