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

这篇文章主要介绍了微信小程序12行js代码自己写个滑块功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

效果图如下所示

在这里插入图片描述

.wxml

   {{percen}}%

.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 ? 300 : (moveX - this.data.kuan) this.data.percen = (towards / (300 / 100)) <1 ? 0 : parseint(towards>

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

以上就是微信小程序12行js代码自己写个滑块功能(推荐)的详细内容，更多请关注0133技术站其它相关文章！