小程序scroll-view滑动进度条

 

效果图如下：

 

 

 

 代码如下：

Page({
    data: {
    left:0.5  // 初始化滑块位置
    },
      //金刚区滑动事件
    scroll(event){
      let scrollLeft = event.detail.scrollLeft + 301;
      let scrllWidth = event.detail.scrollWidth;
      let left;
      if(scrollLeft < (scrllWidth/2)){
        left = `50%`
      }else{
        left = `${(scrollLeft) / scrllWidth * 100}%`
      }
      this.setData({
        left, //模拟滑块滑动 根据css设置 距离左边的百分比
      })
    },
    })

HTML

    <view class="content">
        <view class="block">
                <view class="be-center fubi-block">
                    <view class="block-title-left">
                        <text>优惠券</text>
                    </view>
                    <view bindtap='skipPage' data-url="/pages/coupons/index">
                        <view class="block-title-right">
                            <view class="more">更多</view>
                            <van-icon class="v-center" name="arrow" />
                        </view>
                    </view>
                </view>
                <view class="coupon-module">
                    <scroll-view  scroll-x bindscroll="scroll">
                        <view class="coupon-list">
                            <view class="couponsItem" wx:for="{{10}}" >
                                <view class="block-coupons">
                                    <view class="onelist-hidden coupons-fc">
                                        <view class="coupons-je">
                                            <text class="amount">¥100</text>
                                        </view>
                                        <view class="onelist-hidden f-20" style="text-align: center;">
                                            <text>满任意金额可用</text>
                                        </view>
                                    </view>
                                    <view class="twolist-hidden coupons-name">优惠券名称</view>
                                </view>
                                <view class="coupons-btn">
                                    去使用
                                </view>
                            </view>
                        </view>  
                    </scroll-view>
                    <!-- 模拟进度条 -->
                <view class="slider">
                <view class="slider-inside slider-inside-location" style="left:{{left}}"></view>
                </view>
                </view> 
        </view>
    </view>
    

　　css部分

/* 垂直居中 */
.content{
    background:#F5F5F5;
    height: 100vh;
}
.v-center {
    display: flex;
    align-items: center;
  }
.be-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.block {
    padding: 0 24rpx;
}

.fubi-block {
    height: 62rpx;
    line-height: 62rpx;
}

.block-title-left {
    font-size: 32rpx;
    font-weight: 500;
}

.block-title-fubi {
    width: 42rpx;
    height: 45rpx;
    vertical-align: text-bottom;
}

.block-title-right {
    color: #999;
    font-size: 24rpx;
    display: flex;
    align-items: center;
}

.block-title-right .more {
    margin-right: 4rpx;
}

/* .block-title-right .v-center {
    margin-right: -8rpx;
} */

.card-block {
    margin-top: 24rpx;
    margin-bottom: 40rpx;
    width: 702rpx;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
}
.coupon-list {
    padding: 32rpx 0 24rpx;
    /* height: 288rpx; */
    /* display: flex; */
}

.couponsItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16rpx;
    height: 248rpx;
}

.block-coupons {
    width: 194rpx;
    height: 184rpx;
    background: url('https://fsk-oss.oss-cn-shanghai.aliyuncs.com/image/c49d1185-b28b-491e-8b7b-87766a6e8788%E4%BC%98%E6%83%A0%E5%88%B8.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.coupons-fc {
    color: rgba(235, 88, 56, 1);
    width: 162rpx;
    height: 96rpx;
}

.coupons-name {
    color: rgba(255, 255, 255, 1);
    font-size: 24rpx;
    font-weight: 500;
    width: 162rpx;
    height: 56rpx;
    line-height: 28rpx;
    text-align: center;
    margin-top: 20rpx;
    margin-bottom: 12rpx;
}

.coupons-je {
    text-align: center;
    height: 67rpx;
    line-height: 67rpx;
}

.amount {
    font-size: 48rpx;
    font-weight: 500;
}
.coupons-btn {
    width: 140rpx;
    height: 52rpx;
    line-height: 52rpx;
    border-radius: 16rpx;
    background: linear-gradient(89.8deg, rgba(243, 128, 53, 1) 0%, rgba(241, 109, 50, 1) 100%);
    color: #fff;
    text-align: center;
}
.coupon-content{
    display: flex;
}
.coupon-list .couponsItem:nth-child(1) {
    margin-left: 24rpx;
}

.coupon-module {
    background: #ffffff;
    border-radius: 16rpx;
    position: relative;
    height: 342rpx;
    width: 702rpx;
    overflow: hidden;
    margin-top: 24rpx;
    margin-bottom: 40rpx;
}

.coupon-list {
    padding: 32rpx 0 24rpx;
    display: flex;
}


.slider {
    position: absolute;
    bottom: 24rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 6rpx;
    border-radius: 4rpx;
    background: linear-gradient(135deg, rgba(247, 153, 82, 0.3) 0%, rgba(245, 115, 93, 0.3) 57.99999999999999%, rgba(244, 108, 180, 0.3) 100%);
}

.slider-inside {
    transform: translateX(-100%);
    width: 30rpx;
    height: 100%;
    border-radius: 4rpx;
    background: linear-gradient(135deg, rgba(247, 153, 82, 1) 0%, rgba(245, 115, 93, 1) 57.99999999999999%, rgba(244, 108, 180, 1) 100%);
}
  /* 滑块滑动模拟 */
  .slider-inside-location {
    position: absolute;
    left: 50%;
  }
  /* scroll-view {
    white-space: nowrap;
  } */
  /* 去除滚动条 */
  ::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
    color:transparent;
  }