微信小程序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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 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
php5.3 注意事项说明
2013/07/01 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python实现飞机大战微信小游戏
2020/03/21 Python
python绘制热力图heatmap
2020/03/23 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python入门之基础语法学习笔记
2020/02/08 Python
机电专业个人自荐信格式模板
2013/09/23 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
银行授权委托书范本
2014/10/04 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
办公室主任个人总结
2015/02/28 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
python实现高效的遗传算法
2021/04/07 Python
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
php修改word的实例方法
2021/11/17 PHP
mysql函数之截取字符串的实现
2022/08/14 MySQL