支付宝小程序自定义滚动条，与scroll-view组合

问题描述

最近在做支付宝小程序的页面的时候，遇到了这样的一个需求：

给banner下边加一个自定义的滚动条

思路

因为这个滚动条是靠margin-left来移动的

用scroll-view作为容器,通过onScroll属性来获取滑动的距离(scrollLeft)和整体的宽度(scrollWidth), 然后scrollLeft/scrollWidth 就获取到了margin-left所需要的宽度， percent=70是因为滚动条里的小方块宽度是30%

// ahtml代码
<view>
  <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" onScroll="handleScroll">
    <view style="background:red" class="scroll-view-item_H">1</view>
    <view style="background:pink" class="scroll-view-item_H">2</view>
    <view style="background:yellow" class="scroll-view-item_H">3</view>
    <view style="background:green" class="scroll-view-item_H">4</view>
  </scroll-view>
  <view class="scrollCloumn">
    <!-- 滚动条跑马灯 -->
    <view class="scrollItem" style="{{'margin-left:'+percent+'%'}}"></view>
  </view>
</view>

// JS 代码
Page({
  data: {
    percent: 0,
  },
  onLoad() { },
  handleScroll: function (res) {
    let x1 = Number(res.detail.scrollLeft.toFixed(0))
    let x2 = res.detail.scrollWidth
    let percent = Number(x1 / x2).toFixed(2).slice(-2)
    if (percent >= 70) {
      return this.setData({
          
        percent: 70
      })
    }
    this.setData({
      percent
    })

  },

});



// css 样式

.scroll-view_H{
  white-space: nowrap;
  display:flex;
}
.scroll-view-item_H{
  flex-shrink:0;
  flex-grow:0;
  width: 100vw;
  height: 200px;
}


/* 滚动条样式 */
.scrollCloumn{
  width: 30vw;
  height: 2vw;
  border-radius: 15rpx;
  overflow: hidden;
  background: #ccc;
  margin: 3vw auto;
}

.scrollItem{
  width: 30%;
  height: 100%;
  background: #f08400;
}