之前开发过一个性能，点击按钮展现一个弹层，弹层外面展现商品，商品能够滑动，并且上面有一个进度条。
思路就是 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”。