| commit | author | age | ||
| e3ba12 | 1 | function scroll(event, ownerInstance) { |
| Z | 2 | // detail中含有scroll-view的信息，比如scroll-view的实际宽度，当前时间点scroll-view的移动距离等 |
| 3 | var detail = event.detail | |
| 4 | var scrollWidth = detail.scrollWidth | |
| 5 | var scrollLeft = detail.scrollLeft | |
| 6 | // 获取当前组件的dataset，说白了就是祸国殃民的腾xun搞出来的垃ji | |
| 7 | var dataset = event.currentTarget.dataset | |
| 8 | // 此为scroll-view外部包裹元素的宽度 | |
| 9 | // 某些HX版本(3.1.18)，发现view元素中大写的data-scrollWidth，在wxs中，变成了全部小写，所以这里需要特别处理 | |
| 10 | var scrollComponentWidth = dataset.scrollWidth || dataset.scrollwidth || 0 | |
| 11 | // 指示器和滑块的宽度 | |
| 12 | var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0 | |
| 13 | var barWidth = dataset.barWidth || dataset.barwidth || 0 | |
| 14 | // 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需 | |
| 15 | // 滑动距离(指示器的总宽度减去滑块宽度)的比值 | |
| 16 | var x = scrollLeft / (scrollWidth - scrollComponentWidth) * (indicatorWidth - barWidth) | |
| 17 | setBarStyle(ownerInstance, x) | |
| 18 | } | |
| 19 | ||
| 20 | // 由于webview的无能，无法保证scroll-view在滑动过程中，一直触发scroll事件，会导致 | |
| 21 | // 无法监听到某些滚动值，当在首尾临界值无法监听到时，这是致命的，因为错失这些值会导致滑块无法回到起点和终点 | |
| 22 | // 所以这里需要对临界值做监听并处理 | |
| 23 | function scrolltolower(event, ownerInstance) { | |
| 24 | ownerInstance.callMethod('scrollEvent', 'right') | |
| 25 | // 获取当前组件的dataset | |
| 26 | var dataset = event.currentTarget.dataset | |
| 27 | // 指示器和滑块的宽度 | |
| 28 | var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0 | |
| 29 | var barWidth = dataset.barWidth || dataset.barwidth || 0 | |
| 30 | // scroll-view滚动到右边终点时，将滑块也设置为到右边的终点，它所需移动的距离为：指示器宽度 - 滑块宽度 | |
| 31 | setBarStyle(ownerInstance, indicatorWidth - barWidth) | |
| 32 | } | |
| 33 | ||
| 34 | function scrolltoupper(event, ownerInstance) { | |
| 35 | ownerInstance.callMethod('scrollEvent', 'left') | |
| 36 | // 滚动到左边时，将滑块设置为0的偏移距离，回到起点 | |
| 37 | setBarStyle(ownerInstance, 0) | |
| 38 | } | |
| 39 | ||
| 40 | function setBarStyle(ownerInstance, x) { | |
| 41 | ownerInstance.selectComponent('.u-scroll-list__indicator__line__bar') && ownerInstance.selectComponent('.u-scroll-list__indicator__line__bar').setStyle({ | |
| 42 | transform: 'translateX(' + x + 'px)' | |
| 43 | }) | |
| 44 | } | |
| 45 | ||
| 46 | module.exports = { | |
| 47 | scroll: scroll, | |
| 48 | scrolltolower: scrolltolower, | |
| 49 | scrolltoupper: scrolltoupper | |
| 50 | } | |
