uniapp 自定义实现滑动

实现代码：

<!-- 滑动条 -->
    <view class="m-p-40 m-bg-white" style="position: relative;overflow: hidden;">
        <!-- 总 -->
        <view class="slider-box" style="background: #F5F5F5;width: 670rpx;height: 40rpx;">
            <!-- 遮盖 -->
            <view class="m-bg-white" style="position: absolute;z-index: 11;width: 700rpx;height: 40rpx;transform: rotate(178deg);overflow: hidden;top: 12rpx;left: 35rpx;"></view>
            <!-- 进度条 -->
            <view class="" style="background: #FA4427;width: 170rpx;height: 40rpx;" :style="{width: pageX + 'px'}"></view>
        </view>
        <view class="" style="position: absolute;left: 40rpx;top: 28rpx;z-index: 12;" :style="{left: pageX + 'px'}"
            @touchmove="handletouchmove">
            <image src="https://pics.huimeijiahuishenghuo.com/slider@2x.png" style="width:75rpx" mode="widthFix"></image>
        </view>
        <view class="m-flex m-row-between m-m-t-15">
            <view class="" style="font-size: 26rpx;color: #999;" v-for="item in [5,30,55,80,105]" :key="item">{{item}}万</view>
        </view>
    </view>

滑动计算：

// 滑动
        handletouchmove(e) {
            let s=5, d=100;
            let bs=(d - s)/100;
            let pageX = e.changedTouches[0].pageX,
                maxWidth = uni.upx2px(670);
            if(pageX >= 0 && pageX <= maxWidth){
                this.pageX =pageX;
                // 计算百分比
                let b = maxWidth/100;
                // console.log(maxWidth,pageX, Math.round( pageX / b) )
                console.log(parseInt(bs*Math.round( pageX / b) + 5) )
                
            }
        },