小编这次要给大家分享的是微信小程序如何用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 &#63; 300 : (e.detail.x - this.data.kuan), percen: (e.detail.x / (300 / 100)) < 1 &#63; 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 &#63; 300 : (moveX - this.data.kuan) this.data.percen = (towards / (300 / 100)) < 1 &#63; 0 : parseInt(towards / (300 / 100)) this.setData({ towards: towards, percen: this.data.percen }) } },})

看完这篇关于微信小程序如何用js代码写个滑块功能的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。