feat:Scroller add scrollTo method

doric-android/doric/src/main/java/pub/doric/shader/ScrollerNode.java

@@ -21,7 +21,9 @@ import com.github.pengfeizhou.jscore.JSValue;
 import pub.doric.DoricContext;
 import pub.doric.DoricScrollChangeListener;
 import pub.doric.IDoricScrollable;
+import pub.doric.extension.bridge.DoricMethod;
 import pub.doric.extension.bridge.DoricPlugin;
+import pub.doric.utils.DoricUtils;
 import pub.doric.widget.HVScrollView;
 
 /**
@@ -113,4 +115,20 @@ public class ScrollerNode extends SuperNode<HVScrollView> implements IDoricScrol
     public void setScrollChangeListener(DoricScrollChangeListener listener) {
         this.doricScrollChangeListener = listener;
     }
+
+    @DoricMethod
+    public void scrollTo(JSObject params) {
+        boolean animated = false;
+        if (params.getProperty("animated").isBoolean()) {
+            animated = params.getProperty("animated").asBoolean().value();
+        }
+        JSObject offset = params.getProperty("offset").asObject();
+        if (animated) {
+            this.mView.smoothScrollTo(DoricUtils.dp2px(offset.getProperty("x").asNumber().toFloat()),
+                    DoricUtils.dp2px(offset.getProperty("y").asNumber().toFloat()));
+        } else {
+            this.mView.scrollTo(DoricUtils.dp2px(offset.getProperty("x").asNumber().toFloat()),
+                    DoricUtils.dp2px(offset.getProperty("y").asNumber().toFloat()));
+        }
+    }
 }

doric-demo/src/ScrolledSliderDemo.ts

@@ -1,4 +1,4 @@
-import { Group, text, gravity, Color, LayoutSpec, vlayout, hlayout, layoutConfig, scroller, Text, ViewHolder, VMPanel, ViewModel, network, loge, HLayout, stack, image } from "doric";
+import { Group, text, gravity, Color, LayoutSpec, vlayout, hlayout, layoutConfig, scroller, Text, ViewHolder, VMPanel, ViewModel, network, loge, HLayout, stack, image, Gravity, takeNonNull, Scroller } from "doric";
 import { colors } from "./utils";
 
 interface DoubanModel {
@@ -65,11 +65,15 @@ interface DoubanModel {
 
 interface MovieModel {
     doubanModel?: DoubanModel
+    selectedIdx: number
 }
 
 class MovieVH extends ViewHolder {
     title!: Text
     gallery!: HLayout
+    scrolled!: Scroller
+    movieTitle!: Text
+    movieYear!: Text
 
     build(root: Group) {
         vlayout(
@@ -85,7 +89,7 @@ class MovieVH extends ViewHolder {
                     textAlignment: gravity().center(),
                     height: 50,
                 }),
-                scroller(
+                this.scrolled = scroller(
                     this.gallery = hlayout(
                         [],
                         {
@@ -96,12 +100,26 @@ class MovieVH extends ViewHolder {
                                 left: 20,
                                 right: 20,
                                 bottom: 20,
-                            }
+                            },
+                            gravity: Gravity.Center,
                         }),
                     {
                         layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
                         backgroundColor: Color.parse("#eeeeee"),
-                    })
+                    }),
+                vlayout(
+                    [
+                        this.movieTitle = text({
+                            textSize: 20,
+                        }),
+                        this.movieYear = text({
+                            textSize: 20,
+                        }),
+                    ],
+                    {
+                        layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
+                        gravity: Gravity.Center
+                    }),
             ],
             {
                 layoutConfig: layoutConfig().most(),
@@ -122,20 +140,27 @@ class MovieVM extends ViewModel<MovieModel, MovieVH>{
         if (state.doubanModel) {
             vh.title.text = state.doubanModel.title
             vh.gallery.children.length = 0
-            state.doubanModel.subjects.slice(0, 5).forEach(e => {
+            state.doubanModel.subjects.slice(0, 5).forEach((e, idx) => {
                 vh.gallery.addChild(stack(
                     [
                         image({
                             layoutConfig: layoutConfig().just(),
-                            width: 270 / 2,
-                            height: 400 / 2,
-                            imageUrl: e.images.large
+                            width: 270 / 2 * (idx == state.selectedIdx ? 1.2 : 1),
+                            height: 400 / 2 * (idx == state.selectedIdx ? 1.2 : 1),
+                            imageUrl: e.images.large,
+                            onClick: () => {
+                                this.updateState(state => state.selectedIdx = idx)
+                                vh.scrolled.scrollTo(context, { x: idx * 200, y: 0 })
+                            },
                         })
                     ],
                     {
-                        backgroundColor: Color.YELLOW,
                     }))
             })
+            takeNonNull(state.doubanModel.subjects[state.selectedIdx])(it => {
+                vh.movieTitle.text = it.title
+                vh.movieYear.text = it.year
+            })
         }
     }
 }
@@ -150,7 +175,7 @@ class SliderPanel extends VMPanel<MovieModel, MovieVH>{
     }
 
     getState() {
-        return {}
+        return { selectedIdx: 0 }
     }
 
 }

doric-iOS/Pod/Classes/Shader/DoricScrollerNode.m

@@ -22,6 +22,7 @@
 #import "DoricScrollerNode.h"
 #import "DoricExtensions.h"
 #import "DoricRefreshableNode.h"
+#import "DoricPromise.h"
 
 @implementation DoricScrollView
 
@@ -132,4 +133,11 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
         self.didScrollListener(scrollView);
     }
 }
+
+- (void)scrollTo:(NSDictionary *)params {
+    BOOL animated = [params[@"animated"] boolValue];
+    NSDictionary *offsetDic = params[@"offset"];
+    CGPoint offset = CGPointMake([offsetDic[@"x"] floatValue], [offsetDic[@"y"] floatValue]);
+    [self.view setContentOffset:offset animated:animated];
+}
 @end

doric-js/bundle/doric-lib.es5.js

@@ -2004,6 +2004,9 @@ var Scroller = /** @class */ (function (_super) {
         this.dirtyProps.content = this.content.viewId;
         return _super.prototype.toModel.call(this);
     };
+    Scroller.prototype.scrollTo = function (context, offset, animated) {
+        return this.nativeChannel(context, "scrollTo")({ offset: offset, animated: animated });
+    };
     return Scroller;
 }(Superview));
 

doric-js/bundle/doric-lib.js

@@ -1499,6 +1499,9 @@ class Scroller extends Superview {
         this.dirtyProps.content = this.content.viewId;
         return super.toModel();
     }
+    scrollTo(context, offset, animated) {
+        return this.nativeChannel(context, "scrollTo")({ offset, animated });
+    }
 }
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

doric-js/bundle/doric-vm.js

@@ -2958,6 +2958,9 @@ class Scroller extends Superview {
         this.dirtyProps.content = this.content.viewId;
         return super.toModel();
     }
+    scrollTo(context, offset, animated) {
+        return this.nativeChannel(context, "scrollTo")({ offset, animated });
+    }
 }
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

doric-js/index.d.ts

@@ -570,6 +570,7 @@ declare module 'doric/lib/src/widget/slider' {
 
 declare module 'doric/lib/src/widget/scroller' {
     import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view';
+    import { BridgeContext } from 'doric/lib/src/runtime/global';
     export function scroller(content: View, config?: IScroller): Scroller;
     export interface IScroller extends IView {
         content?: View;
@@ -578,6 +579,10 @@ declare module 'doric/lib/src/widget/scroller' {
         content: View;
         allSubviews(): View[];
         toModel(): NativeViewModel;
+        scrollTo(context: BridgeContext, offset: {
+            x: number;
+            y: number;
+        }, animated?: boolean): Promise<any>;
     }
 }
 

doric-js/lib/src/widget/scroller.d.ts

@@ -1,4 +1,5 @@
 import { Superview, View, IView, NativeViewModel } from '../ui/view';
+import { BridgeContext } from '../runtime/global';
 export declare function scroller(content: View, config?: IScroller): Scroller;
 export interface IScroller extends IView {
     content?: View;
@@ -7,4 +8,8 @@ export declare class Scroller extends Superview implements IScroller {
     content: View;
     allSubviews(): View[];
     toModel(): NativeViewModel;
+    scrollTo(context: BridgeContext, offset: {
+        x: number;
+        y: number;
+    }, animated?: boolean): Promise<any>;
 }

doric-js/lib/src/widget/scroller.js

@@ -34,4 +34,7 @@ export class Scroller extends Superview {
         this.dirtyProps.content = this.content.viewId;
         return super.toModel();
     }
+    scrollTo(context, offset, animated) {
+        return this.nativeChannel(context, "scrollTo")({ offset, animated });
+    }
 }

doric-js/src/widget/scroller.ts

@@ -15,6 +15,7 @@
  */
 import { Superview, View, IView, NativeViewModel } from '../ui/view'
 import { layoutConfig } from '../util/layoutconfig'
+import { BridgeContext } from '../runtime/global'
 
 export function scroller(content: View, config?: IScroller) {
     return (new Scroller).also(v => {
@@ -43,4 +44,8 @@ export class Scroller extends Superview implements IScroller {
         this.dirtyProps.content = this.content.viewId
         return super.toModel()
     }
+
+    scrollTo(context: BridgeContext, offset: { x: number, y: number }, animated?: boolean) {
+        return this.nativeChannel(context, "scrollTo")({ offset, animated })
+    }
 }

doric-web/dist/index.js

@@ -3016,6 +3016,9 @@ class Scroller extends Superview {
         this.dirtyProps.content = this.content.viewId;
         return super.toModel();
     }
+    scrollTo(context, offset, animated) {
+        return this.nativeChannel(context, "scrollTo")({ offset, animated });
+    }
 }
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {