微信小程序 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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
CocosCreator入门教程之网络通信
Apr 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
Python request post上传文件常见要点
2020/11/20 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
工程师岗位职责
2013/11/08 职场文书
教师现实表现材料
2014/02/14 职场文书
招聘专员岗位职责
2014/03/07 职场文书
2014年度考核工作总结
2014/12/24 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书