效果圖如下所示

.wxml

<view bindtap='cuin'> <view style='width:{{towards}}px;'> <view 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代碼自己寫個滑塊功能的文章就介紹到這了,更多相關微信小程序滑塊內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！