微信小程序實現帶滑塊的進度條
微信小程序項目需求，要實現一個帶滑塊並可左右滑動的進度條，看瞭小程序的文檔，發現上面的progress組件無法滿足需求，所以我自己寫瞭一個，在這裡總結一下。
一、效果圖
二、實現邏輯
功能實現的邏輯比較簡單，這裡簡單說明一下：
1、首先用一個標簽將相關代碼包裹起來，加上靜態定位；
2、畫兩條一模一樣的線條，其中一條加上相對定位改變線條的顏色，動態設置它的寬度；
3、畫一個滑塊，使用相對定位定到線條上面，給它加bindtouchmove事件，獲取它距離左邊的寬度，然後對應設置上去即可。
三、相關代碼
1、wxml文件
<view class="process_wrap">
<view class="line" bindtap="moveTo"></view>
<!-- 這裡的寬度和left值也可以改成百分比，效果是一樣的 -->
<view class="active_line" style="width:{{2*progress}}rpx;" bindtap="moveTo"></view>
<view class="spot" style="left:{{2*progress}}rpx" bindtouchmove="moveTo" catchtouchstart="buttonStart"></view>
<view style="margin-top:50rpx;">{{precent}}%</view>
</view>
2、js文件
var startPoint;
const min = 0; // 最小寬度 單位px
const max = 200; // 最大寬度 單位px
Page({
/**
* 頁面的初始數據
*/
data: {
buttonLeft: 0,
progress: 0, // 進度條的寬度，這裡的單位是px，所以在wxml文件中要改為rpx
precent:0 // 這個是百分比
},
buttonStart: function (e) {
startPoint = e.touches[0]
},
moveTo(e) {
var endPoint = e.touches[e.touches.length - 1]
var translateX = endPoint.clientX - startPoint.clientX
startPoint = endPoint;
var buttonLeft = this.data.buttonLeft + translateX;
if (buttonLeft > max) {
// 滑動位置大於進度條最大寬度的時候讓它為最大寬度
buttonLeft = max
}
if (buttonLeft < min) {
// 滑動位置小於進度條最大寬度的時候讓它為最小寬度
buttonLeft = min
}
this.setData({
buttonLeft: buttonLeft,
progress: buttonLeft,
precent:parseInt((buttonLeft/max)*100)
})
}
})
3、wxss文件
.process_wrap {
position: relative;
width: 400rpx;
margin-left: 60rpx;
}
.process_wrap .line {
width: 400rpx;
height: 2rpx;
background: #B5B8C2;
}
.process_wrap .active_line {
position: absolute;
top: -4rpx;
left: 0;
max-width: 400rpx;
height: 8rpx;
background: linear-gradient(83deg, #84B3FF 0%, #116DF6 100%);
}
.process_wrap .spot {
position: absolute;
top: -20rpx;
left: 0;
width: 40rpx;
height: 40rpx;
background: #1A73FF;
box-shadow: 0px 2px 10px 0px rgba(196, 200, 204, 0.5);
border: 2px solid #FFFFFF;
border-radius: 100%;
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。