Demo:

最终实现效果如下

接下来要实现的就是下面的，滚动条，显示横向拖动的进度。

Component代码：

index.js

Component({
    properties: {
        customStyle: {
            type:String,
        },
        // 根据Slot中的元素计算出的ScrollView总宽度 rpx
        scrollViewWidth: {
            type: Number,
            value: 0
        },
        // ScrollView的总高度，调整高度来控制显示行数 rpx
        scrollViewHeight: {
            type: Number,
            value: 0
        },
        // 滚动条的宽度rpx
        scrollBarWidth: {
            type: Number,
            value: 160
        },
        // 滚动条的高度 rpx
        scrollBarHeight: {
            type: Number,
            value: 10
        },
        // 滚动条滑块的宽度 rpx
        scrollBarBlockWidth: {
            type: Number,
            value: 100
        },
        // 滚动条样式
        scrollBarStyle: {
            type: String,
        },
        // 滚动滑块样式
        scrollBarBlockStyle: {
            type: String,
        }

    },
    data: {
        windowWidth: 375, // px
        px2rpxRatio: 0,
        windowWidth2ScrollViewWidthRatio: 0,
        scrollBarBlockLeft: 0,
    },
    lifetimes: {
        attached: function() {
            this.data.windowWidth = wx.getSystemInfoSync().windowWidth

            this.setData({
                px2rpxRatio: Number(750 / this.data.windowWidth).toFixed(3)
            })
            console.log('px2rpxRatio', this.data.px2rpxRatio)
            this.setData({
                windowWidth2ScrollViewWidthRatio: Number(this.data.windowWidth * this.data.px2rpxRatio / this.data.scrollViewWidth).toFixed(3)
            })
            let scrollBarBlockWidth =  Number(this.data.scrollBarWidth * this.data.windowWidth2ScrollViewWidthRatio).toFixed()
            if(scrollBarBlockWidth >= this.data.scrollBarWidth) {
                scrollBarBlockWidth = this.data.scrollBarWidth
            }
            this.setData({
                scrollBarBlockWidth: scrollBarBlockWidth
            })

        },

    },
})

index.wxml

<wxs module="wxs" src="./index.wxs"></wxs>
<view style="{{ customStyle }}">
    <scroll-view scroll-x="{{ true }}" bind:scroll="{{ wxs.onScroll }}" data-px2rpxRatio="{{ px2rpxRatio }}" data-scrollViewWidth="{{ scrollViewWidth }}" data-scrollBarWidth="{{ scrollBarWidth }}">
        <view class="scroll-view" style="height: {{ scrollViewHeight }}rpx">
            <slot/>
        </view>
    </scroll-view>
    <view class="scrollbar" style="width: {{ scrollBarWidth }}rpx; height: {{ scrollBarHeight}}rpx; margin: 0 auto; margin-top: 10rpx; {{ scrollBarStyle }}">
        <view class="scrollbar-block" id="scrollbar" style="width: {{ scrollBarBlockWidth }}rpx; left: {{scrollBarBlockLeft}}rpx; {{ scrollBarBlockStyle }}"></view>
    </view>
</view>

index.wxs

var onScroll = function(e, ownerInstance) {
    var scrollBarBlockLeft = (e.detail.scrollLeft * e.currentTarget.dataset.px2rpxratio / (e.currentTarget.dataset.scrollviewwidth)) * e.currentTarget.dataset.scrollbarwidth
    ownerInstance.selectComponent('#scrollbar').setStyle({left: scrollBarBlockLeft + 'rpx'})
}
module.exports = {
    onScroll: onScroll
};

index.wxss

.scroll-view{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.scrollbar {
  margin: 0 auto;
  background: black;
  position: relative;
  border-radius: 4rpx;
  overflow: hidden;
}
.scrollbar-block {
  height: 100%;
  position: absolute;
  top: 0;
  background: darkred;
  border-radius: 4rpx;
}

以上就是组件的代码部分，下面来看一看在Page页中如何使用，代码也很简单：

index.js

//index.js
Page({
    data: {
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    }
})

index.wxml

<x-scroll-bar scroll-view-width="1200" scroll-view-height="400">
    <view wx:for="{{ data }}" class="block" >
        {{ item }}
    </view>
</x-scroll-bar>

index.wxss

.block{
  flex-shrink: 0;
  flex-grow: 0;
  background: black;
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  color: white;
}
.block:nth-child(even) {
  background: red;
}

以上全部内容，组件代码已经在我的Github，可直接访问下载：

https://github.com/foolstack-omg/fool-weapp