bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-scroll-list/scrollWxs.wxs

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@
function scroll(event, ownerInstance) {
   // detail中含有scroll-view的信息，比如scroll-view的实际宽度，当前时间点scroll-view的移动距离等
   var detail = event.detail
   var scrollWidth = detail.scrollWidth
   var scrollLeft = detail.scrollLeft
   // èŽ·å–当前组件的dataset，说白了就是祸国殃民的腾xun搞出来的垃ji
   var dataset = event.currentTarget.dataset
   // æ­¤ä¸ºscroll-view外部包裹元素的宽度
   // æŸäº›HX版本(3.1.18)，发现view元素中大写的data-scrollWidth，在wxs中，变成了全部小写，所以这里需要特别处理
   var scrollComponentWidth = dataset.scrollWidth || dataset.scrollwidth || 0
   // æŒ‡ç¤ºå™¨å’Œæ»‘块的宽度
   var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0
   var barWidth = dataset.barWidth || dataset.barwidth || 0
   // æ­¤å¤„的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
   // æ»‘动距离(指示器的总宽度减去滑块宽度)的比值
   var x = scrollLeft / (scrollWidth - scrollComponentWidth) * (indicatorWidth - barWidth)
   setBarStyle(ownerInstance, x)
}

// ç”±äºŽwebview的无能，无法保证scroll-view在滑动过程中，一直触发scroll事件，会导致
// æ— æ³•ç›‘听到某些滚动值，当在首尾临界值无法监听到时，这是致命的，因为错失这些值会导致滑块无法回到起点和终点
// æ‰€ä»¥è¿™é‡Œéœ€è¦å¯¹ä¸´ç•Œå€¼åšç›‘听并处理
function scrolltolower(event, ownerInstance) {
   ownerInstance.callMethod('scrollEvent', 'right')
   // èŽ·å–当前组件的dataset
   var dataset = event.currentTarget.dataset
   // æŒ‡ç¤ºå™¨å’Œæ»‘块的宽度
   var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0
   var barWidth = dataset.barWidth || dataset.barwidth || 0
   // scroll-view滚动到右边终点时，将滑块也设置为到右边的终点，它所需移动的距离为：指示器宽度 - æ»‘块宽度
   setBarStyle(ownerInstance, indicatorWidth - barWidth)
}

function scrolltoupper(event, ownerInstance) {
   ownerInstance.callMethod('scrollEvent', 'left')
   // æ»šåŠ¨åˆ°å·¦è¾¹æ—¶ï¼Œå°†æ»‘块设置为0的偏移距离，回到起点
   setBarStyle(ownerInstance, 0)
}

function setBarStyle(ownerInstance, x) {
   ownerInstance.selectComponent('.u-scroll-list__indicator__line__bar') && ownerInstance.selectComponent('.u-scroll-list__indicator__line__bar').setStyle({
      transform: 'translateX(' + x + 'px)'
   })
}

module.exports = {
   scroll: scroll,
   scrolltolower: scrolltolower,
   scrolltoupper: scrolltoupper
}