微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條

更新時(shí)間：2022年06月30日 10:35:04 作者：紫菀檀ss

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序項(xiàng)目需求，要實(shí)現(xiàn)一個(gè)帶滑塊并可左右滑動(dòng)的進(jìn)度條，看了小程序的文檔，發(fā)現(xiàn)上面的progress組件無(wú)法滿足需求，所以我自己寫(xiě)了一個(gè)，在這里總結(jié)一下。

一、效果圖

二、實(shí)現(xiàn)邏輯

功能實(shí)現(xiàn)的邏輯比較簡(jiǎn)單，這里簡(jiǎn)單說(shuō)明一下：

1、首先用一個(gè)標(biāo)簽將相關(guān)代碼包裹起來(lái)，加上靜態(tài)定位；
2、畫(huà)兩條一模一樣的線條，其中一條加上相對(duì)定位改變線條的顏色，動(dòng)態(tài)設(shè)置它的寬度；
3、畫(huà)一個(gè)滑塊，使用相對(duì)定位定到線條上面，給它加bindtouchmove事件，獲取它距離左邊的寬度，然后對(duì)應(yīng)設(shè)置上去即可。

三、相關(guān)代碼

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({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? buttonLeft: 0,
? ? progress: 0, // 進(jìn)度條的寬度，這里的單位是px，所以在wxml文件中要改為rpx
? ? precent:0 // 這個(gè)是百分比
? },
? 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) {
? ? ? // 滑動(dòng)位置大于進(jìn)度條最大寬度的時(shí)候讓它為最大寬度
? ? ? buttonLeft = max
? ? }
? ? if (buttonLeft < min) {
? ? ? // 滑動(dòng)位置小于進(jìn)度條最大寬度的時(shí)候讓它為最小寬度
? ? ? 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%;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: