微信小程式實現橫向卷軸

<view class="hotService">
    <view class="hotServiceList_box">
    <!-- 這裡為捲動的內容部分 -->
            <scroll-view class="hotServiceList_scroll" scroll-x="true" bindscroll="getleft">
                <view class="hotService_content">
                    <block wx:for="{{dataList}}" wx:key="{{index}}">
                        <view class="block{{index}} block">
                            <view class="blockContent">
                                <text>第{{index + 1}}塊內容</text>
                            </view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        <!--卷軸部分-->
        <view class="slide" wx:if="{{slideShow}}">
            <view class='slide-bar'>
                <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view>
            </view>
        </view>
    </view>
</view>

const app = getApp()

Page({
  data: {
    // 滑動比例計算
    slideWidth: '', //滾軸寬
    slideLeft: 0, //滾軸位置
    totalLength: '', //當前捲動列表總長
    slideShow: false, //滾軸是否顯示
    slideRatio: '', //滾軸比例
    // 渲染資料
    dataList: [{
        text: '第1塊'
      },{
        text: '第2塊'
      }, {
        text: '第3塊'
      },{
        text: '第4塊'
      },{
        text: '第5塊'
      },{
        text: '第6塊'
      }],
  },
  onLoad: function () {
    // 這裡是獲取視口口寬度
    var systemInfo = wx.getSystemInfoSync();
    this.setData({
      windowWidth: systemInfo.windowWidth,
    })
    this.getRatio()
  },
  getRatio() {
    if (this.data.dataList.length < 4) {
      this.setData({
        slideShow: false
      })
    } else {
      var _totalLength = this.data.dataList.length * 173; //分類列表總長度
      var _ratio = 80 / _totalLength * (750 / this.data.windowWidth); //捲動列表長度與滑條長度比例
      var _showLength = 750 / _totalLength * 80; //當前顯示藍色滑條的長度(保留兩位小數)
      this.setData({
        slideWidth: _showLength,
        totalLength: _totalLength,
        slideShow: true,
        slideRatio: _ratio
      })
    }
  },
  //slideLeft動態變化
  getleft(e) {
    this.setData({
      slideLeft: e.detail.scrollLeft * this.data.slideRatio
    })
  },

})

.hotService{
  width: 100%;
  height: 300rpx;
  background-color: #fff;
  padding: 0 26rpx;
  box-sizing: border-box;
}
.hotServiceList_box {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.block {
  width: 158rpx;
  height: 158rpx;
  padding: 0 10rpx;
  display: inline-block;
 
}
.blockContent{
  width: 100%;
  height: 100%;
  background-color: rgb(101, 203, 243);
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:first-child {
  padding: 0 15rpx 0 0;
}
.slide{
  height: 20rpx;
  background:#fff;
  width:100%;
  padding:14rpx 0 5rpx 0
 }
 .slide .slide-bar{
  width: 80rpx;
  margin:0 auto;
  height: 10rpx;
  background:#eee;
  border-radius: 8rpx;
 }
 .slide .slide-bar .slide-show{
  height:100%;
  border-radius: 8rpx;
  background-color: #00aeff;
 }

{
  "usingComponents": {}
}