微信小程序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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
详解vue-router导航守卫
Jan 19 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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_MySQL教程-第一天
2007/03/18 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
python获取目录下所有文件的方法
2015/06/01 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Linux下python3.7.0安装教程
2018/07/30 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
乡下人家教学反思
2014/02/01 职场文书
会计电算化专业求职信
2014/06/10 职场文书
火锅店的活动方案
2014/08/15 职场文书
旅游活动总结
2014/08/27 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
小学工作总结2015
2015/05/04 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫