微信小程序12行js代码自己写个滑块功能(推荐)


Posted in Javascript onJuly 15, 2020

效果图如下所示

微信小程序12行js代码自己写个滑块功能(推荐)

.wxml

<view class="jindu" bindtap="cuin">
 <view class="xian" style="width:{{towards}}px;">
 <view class="yuan" bindtouchmove='touchMove'></view>
 </view>
</view>
<view class="bfb">{{percen}}%</view>

.wxss

page{
 background-color:#ddd;
}
.jindu{
 margin: 50px calc((100% - 300px) / 2) 0;
 width: 300px;
 float: left;
 height: 6rpx;
 background-color: #fff;
 position: relative;
}
.xian{
 width: 0%;
 float: left;
 height: 6rpx;
 background-color: #1989FA;
 position: relative;
 transition: all 0.1s;
}
.yuan{
 border-radius: 50%;
	background: #1989FA;
	position: absolute;
	right: 0rpx;
	display: block;
 margin: calc((6rpx - 14rpx)/2);
	width: 14rpx;
	height: 14rpx;
}
.bfb{
 width: 300px;
 margin: 10px calc((100% - 300px) / 2) 0;
 float: left;
}

.js

Page({
 data: {
 towards: 0,
 percen:0,
 kuan:0,
 },
 onLoad:function(options){
 this.setData({
  kuan: parseInt((wx.getSystemInfoSync().windowWidth - 300) / 2)
 })
 },
 cuin:function(e){
 this.setData({
  towards: (e.detail.x - this.data.kuan) > 300 ? 300 : (e.detail.x - this.data.kuan),
  percen: (e.detail.x / (300 / 100)) < 1 ? 0 : parseInt(e.detail.x / (300 / 100)),
 })
 },
 touchMove: function (e) {
 if (e.touches.length == 1) {
  var moveX = e.touches[0].clientX;
  var towards = (moveX - this.data.kuan) > 300 ? 300 : (moveX - this.data.kuan)
  this.data.percen = (towards / (300 / 100)) < 1 ? 0 : parseInt(towards / (300 / 100))
  this.setData({
  towards: towards,
  percen: this.data.percen
  })
 }
 },
})

到此这篇关于微信小程序12行js代码自己写个滑块功能的文章就介绍到这了,更多相关微信小程序滑块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
详解如何运行vue项目
Apr 15 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 #Javascript
微信小程序实现列表的横向滑动方式
Jul 15 #Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 #Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 #Javascript
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 #Javascript
Vue中keep-alive的两种应用方式
Jul 15 #Javascript
You might like
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP连接access数据库
2015/03/27 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
存储过程的优点有哪些
2012/09/27 面试题
岗位职责怎么写
2014/03/14 职场文书
幼儿园新年寄语
2014/04/03 职场文书
安全员岗位职责
2015/02/10 职场文书
诚实守信主题班会
2015/08/13 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Ruby处理CSV数据方法详解
2022/04/18 Ruby
Java设计模式之代理模式
2022/04/22 Java/Android