乐趣区

关于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”。

退出移动版