微信小程序使用scroll-view横向滚动图片，并展示模拟进度条

之前开发过一个功能，点击按钮展示一个弹层，弹层里面展示商品，商品可以滑动，并且下面有一个进度条。思路就是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"。