fix: 修复滚动条的样式表现问题

wechat-miniprogram · Dec 24, 2023 · 482d5a0 · 482d5a0
1 parent 633f900
commit 482d5a0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/src/components/scrollbar.ts b/src/components/scrollbar.ts
@@ -15,6 +15,9 @@ interface IDimensions {
 
   maxScrollLeft: number;
   maxScrollTop: number;
+
+  scrollLeft: number;
+  scrollTop: number;
 }
 
 interface IScrollBarOptions {
@@ -54,10 +57,10 @@ export default class ScrollBar extends View {
   public dimensions: IDimensions;
 
   // 滚动完毕后一段时间后自动隐藏
-  public autoHide = true;
+  public autoHide = false;
 
   // 滚动完毕后自动隐藏时间
-  public autoHideTime = 1000;
+  public autoHideTime = 1500;
 
   private autoHideRemainingTime = 0;
 
@@ -75,7 +78,7 @@ export default class ScrollBar extends View {
       backgroundColor,
       position: 'absolute',
       borderRadius: width / 2,
-      opacity: 0,
+      opacity: 1,
     }, updateStyleFromDimensions(width, direction, dimensions));
 
     super({
@@ -134,9 +137,20 @@ export default class ScrollBar extends View {
 
     if (checkNeedHideScrollBar(this.direction, dimensions)) {
       this.hide();
+    } else {
+      this.show();
     }
 
     this.dimensions = dimensions;
+
+    const { scrollLeft, scrollTop } = this.calculteScrollValue(dimensions.scrollLeft, dimensions.scrollTop);
+
+    if (this.direction === ScrollBarDirection.Vertival) {
+      this.style.top = scrollTop;
+
+    } else {
+      this.style.left = scrollLeft;
+    }
   }
 
   calculteScrollValue(left: number, top: number) {

diff --git a/src/components/scrollview.ts b/src/components/scrollview.ts
@@ -225,11 +225,17 @@ export default class ScrollView extends View {
       contentHeight: this.scrollerObj!.__contentHeight,
       maxScrollLeft: this.scrollerObj!.__maxScrollLeft,
       maxScrollTop: this.scrollerObj!.__maxScrollTop,
+
+      scrollLeft: this.scrollerObj!.__scrollLeft,
+      scrollTop: this.scrollerObj!.__scrollTop,
     }
 
+    console.log('dimensions', JSON.stringify(dimensions))
+
     if (this[scrollProp as keyof ScrollView]) {
       if (this[scrollBarName as keyof ScrollView]) {
         this[scrollBarName as keyof ScrollView].setDimensions(dimensions);
+        console.log(this[scrollBarName as keyof ScrollView])
       } else {
         const scrollBar = new ScrollBar({
           dimensions,
@@ -249,6 +255,8 @@ export default class ScrollView extends View {
         // @ts-ignore
         this[scrollBarName] = scrollBar;
 
+        console.log(scrollBar)
+
         // @ts-ignore
         this.root.ticker.next(() => {
           // @ts-ignore

diff --git a/src/libs/scroller/index.js b/src/libs/scroller/index.js
@@ -278,7 +278,7 @@ export default class Scroller {
     this.__computeScrollMax();
 
     // Refresh scroll position
-    this.scrollTo(this.__scrollLeft, this.__scrollTop, true);
+    this.scrollTo(this.__scrollLeft, this.__scrollTop, false);
   }