微信小程序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技巧--转义符&quot;\&quot;的妙用
Jan 09 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 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
php define的第二个参数使用方法
2013/11/04 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
详解 javascript对象创建模式
2020/10/30 Javascript
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python对文件的操作方法汇总
2020/02/28 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
合作意向协议书范本
2014/03/31 职场文书
校园广播稿100字
2014/10/06 职场文书
信息合作协议书
2014/10/09 职场文书
人事专员岗位职责
2015/02/03 职场文书
市场督导岗位职责
2015/04/10 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
导游词之潮音寺
2019/09/26 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS