微信小程序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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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中__get()和__set()的用法实例详解
2013/06/04 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
基于django传递数据到后端的例子
2019/08/16 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
社区党员先进事迹
2014/01/22 职场文书
网络营销策划方案
2014/06/04 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
食品卫生管理制度
2015/08/06 职场文书
护理自荐信
2019/05/14 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL