微信小程序slider组件使用详解


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序slider组件的使用方法,供大家参考,具体内容如下

效果图

微信小程序slider组件使用详解

WXML

<view class="tui-content">
 <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view>
 <view class="tui-slider-box">
  <slider bindchange="changeSlider1" step="5" value="{{slider1}}"/>
 </view>
</view>
<view class="tui-content">
 <view class="tui-slider-head">是否在右侧显示当前值</view>
 <view class="tui-slider-box">
  <slider bindchange="changeSlider2" value="{{slider2}}" show-value/>
 </view>
</view>
<view class="tui-content">
 <view class="tui-slider-head">设置最大值、最小值</view>
 <view class="tui-slider-box">
  <slider bindchange="changeSlider3" min="20" max="90" value="{{slider3}}" show-value/>
 </view>
</view>
<view class="tui-content">
 <view class="tui-slider-head">滑动选择器设置名称</view>
 <view class="tui-slider-box">
  <view class="tui-fl">
   选择
  </view>
  <view class="tui-fl">
   {{slider4}}
  </view>
  <view style="overflow:hidden">
   <slider bindchanging="changeSlider4" value="{{slider4}}"/>
  </view>
 </view>
</view>

WXSS

.tui-slider-head,.tui-slider-box{
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 color: #666;
}

JS

Page({
 data: {
  slider1: 50,
  slider2: 50,
  slider3: 50,
  slider4: 50
 },
 changeSlider1(e) {
  this.setData({ slider1: e.detail.value })
 },
 changeSlider2(e){
  this.setData({ slider2: e.detail.value})
 },
 changeSlider3(e) {
  this.setData({ slider3: e.detail.value })
 },
 changeSlider4(e) {
  this.setData({ slider4: e.detail.value })
 }
})

注意:slider组件的两个事件:bindchanging拖动过程中触发,bindchange完成一次拖动后触发!

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的数组的扩展实例代码
Jul 09 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 #Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 #Javascript
微信小程序progress组件使用详解
Jan 31 #Javascript
微信小程序button组件使用详解
Jan 31 #Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 #Javascript
微信小程序模板(template)使用详解
Jan 31 #Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 #Javascript
You might like
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP实现图片压缩
2020/09/09 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
JS实现放大镜效果
2020/09/21 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
新浪网技术部笔试题
2016/08/26 面试题
网络技术支持面试题
2013/04/22 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
银行职员自我鉴定
2014/04/20 职场文书
毕业证委托书范文
2014/09/26 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
2015年女工委工作总结
2015/07/27 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python