小编这次要给大家分享的是微信小程序如何用js代码写个滑块功能，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。
效果图如下所示
.wxml
<view class="jindu" bindtap="cuin"> <view class="xian" > <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 }) } }, })看完这篇关于微信小程序如何用js代码写个滑块功能的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
