微信小程序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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue中的计算属性和侦听属性
Nov 06 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 Class 文章
2007/04/04 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
python使用mailbox打印电子邮件的方法
2015/04/30 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
python并发和异步编程实例
2018/11/15 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
德国网上药房:Apotal
2017/04/04 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
五一家具促销方案
2014/01/10 职场文书
化工专业自荐书
2014/06/16 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
商务司机岗位职责
2015/04/10 职场文书
付款证明格式范文
2015/06/19 职场文书
新郎新娘致辞
2015/07/31 职场文书
初中语文教学随笔
2015/08/15 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python