关于javascript:微信小程序使用scrollview横线滚动条并展示模拟进度条

之前开发过一个性能，点击按钮展现一个弹层，弹层外面展现商品，商品能够滑动，并且上面有一个进度条。
思路就是 scroll-view 外面展现图片，而后应用这个组件的 api。
关上弹层，须要思考到一种状况：图片宽度无奈撑满 scroll-view，那就须要模仿进度条撑满。我定义的 scroll-view 宽度就是屏幕的宽度。
所以接口返回图片的数量后，我须要计算图片列表汇合的总宽度。
上面是代码：

    <scroll-view class="scroll" scroll-x="true" bindscroll="scroll" bindscrolltolower='scrollEnd' style="width: 100%" throttle="{{false}}">
      <view class="product-item" wx:for="{{detailInfo.productList}}">
        <image class="imgUrl" mode="aspectFill" src="{{item.imgUrl}}"></image>
        <view class="productName">{{item.productName}}</view>
        <view class="price">¥ {{item.price}}</view>
      </view>
    </scroll-view>
    进度条
    <view class="dots1" >
      <view class="dots1-item" style="width:{{left}}"></view>
    </view>

  /**
   * 页面的初始数据
   */
  data: {left: 0,},

弹层关上的时候进度条设置默认的地位：

    // 设置进动条初始地位
    let query = wx.createSelectorQuery();
    // 获取图片父盒子定义的的宽度
    query.select('.product-item').boundingClientRect(rect => {
        // 返回的图片汇合总宽度
      let width = rect.width * this.data.detailInfo.productList.length;
        // scroll-view 的宽度和屏幕宽度统一
      let windowWidth = wx.getSystemInfoSync().windowWidth;
      if (width <= windowWidth) {
        this.setData({left: `100%`})
      } else {
        this.setData({left: `${windowWidth / width * 100}%`
        })
      }
    }).exec();

滚动的时候：

  // 滑动事件
  scroll(event) {
    // 默认须要让进度条展现图片一屏幕的宽度
    let scrollLeft = event.detail.scrollLeft + wx.getSystemInfoSync().windowWidth;
    // 图片须要滑动的总宽度
    let scrllWidth = event.detail.scrollWidth;
    // 对应的比例
    let left = `${scrollLeft / scrllWidth * 100}%`
    this.setData({left, // 模仿滑块滑动 依据 css 设置 间隔右边的百分比})
  },
  // 滑动到底部
  scrollEnd() {console.log("完结")
    // 滑动完结，强制滑块宽度 100%
    this.setData({left: `100%`})
  },

在测试的时候遇到一个问题：scroll-view 组件应用 scroll 滑动事件中的 scrollTop 有时不为 0 的问题。
查看了网上的办法：

问题：scroll-view 的 scroll 滑动事件，常常会有这样的问题：scroll-view 滑动到顶部后，最初的事件中的 scrollTop 不为 0、toupper 事件也没有收到等

起因：scroll-view 组件自带节流，所以滑动过快时，会呈现滑到顶部，scrollTop 不为 0 的 bug。因为局部 scroll 事件被节流掉了。

解决办法：增加 throttle=”{{false}}” 属性，敞开官网默认节流，保障 scroll 事件能全副触发，本人实现节流即可。uni-app 语法 :throttle=”false”。