WeChat アプレット プロジェクトのニーズに応えて、左右にスライドできるスライダーを備えたプログレス バーを実装する必要があるのですが、アプレットのドキュメントを読んだところ、上記のプログレス コンポーネントでは要件を満たせないことがわかりました。自分でも書いたので、ここにまとめておきます。
1. レンダリング
2. ロジックを実現する
関数実現のロジックは比較的単純です。簡単に説明します。
- まず、関連するコードをラベルでラップし、静的位置を追加します。
- 2 本の同一の線を描画します。そのうちの 1 つは、相対的な位置を追加して線の色を変更し、その幅を動的に設定します。
- スライダーを描画し、相対位置を使用してライン上に固定し、bindtouchmove イベントをそれに追加し、左から幅を取得して、それに応じて設定します。
3. 関連コード
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%;
}