频道页面下拉上拉，优化手势

zhangbo1_wd
Commit e64e5afae7d1c92ab5824e6c7862a7e691cc3679 e64e5afa 1 parent 9bdd89ac
Showing 2 changed files with 106 additions and 11 deletions
sight_harmony/features/wdComponent/src/main/ets/components/page/PageComponent.ets
sight_harmony/features/wdComponent/src/main/ets/utils/PullDownRefresh.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/PageComponent.ets
View file @e64e5af
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/PageComponent.ets
View file @e64e5af
@@ -2,7 +2,7 @@ import { CommonConstants, ViewType } from 'wdConstant';
 import { Logger } from 'wdKit';
 import { EmptyComponent } from '../view/EmptyComponent';
 import PageModel from '../../viewmodel/PageModel';
-import { autoRefresh, listTouchEvent } from '../../utils/PullDownRefresh';
+import { autoRefresh, onActionEnd, onActionStart, onActionUpdate } from '../../utils/PullDownRefresh';
 import LoadMoreLayout from './LoadMoreLayout';
 import { CompParser } from '../CompParser';
 import { CompDTO } from 'wdBean';
@@ -14,9 +14,6 @@ import PageNoMoreLayout from './PageNoMoreLayout';
 import { NoMoreBean } from './NoMoreBean';
 import { RefreshLayoutBean } from '../refresh/RefreshLayoutBean';
 import RefreshLayout from '../refresh/RefreshLayout';
-import json from '@ohos.util.json';
-import { viewBlogInsightIntentShare, ActionMode } from '../../utils/InsightIntentShare'
-import { common } from '@kit.AbilityKit';
 const TAG = 'PageComponent';
 @Component
@@ -31,6 +28,7 @@ export struct PageComponent {
   // 自动刷新通知
   @Prop @Watch('onAutoRefresh') autoRefresh: number = 0
   private listScroller: Scroller = new Scroller();
+  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down })
   needload: boolean = true;
   build() {
     Column() {
@@ -51,13 +49,26 @@ export struct PageComponent {
     }
     .width(CommonConstants.FULL_PARENT)
     .height(CommonConstants.FULL_PARENT)
-    .onTouch((event: TouchEvent | undefined) => {
-      if (event) {
-        if (this.pageModel.viewType === ViewType.LOADED) {
-          listTouchEvent(this.pageModel, this.pageAdvModel, event);
-        }
-      }
+    // .onTouch((event: TouchEvent | undefined) => {
+    //   if (event) {
+    //     if (this.pageModel.viewType === ViewType.LOADED) {
+    //       listTouchEvent(this.pageModel, this.pageAdvModel, event);
+    //     }
+    //   }
+    // })
+    // 对接新的下拉刷新手势，替换touch事件
+    .parallelGesture(
+      PanGesture(this.panOption)
+        .onActionStart((event?: GestureEvent) => {
+          onActionStart(this.pageModel, this.pageAdvModel, event)
+        })
+        .onActionUpdate((event?: GestureEvent) => {
+          onActionUpdate(this.pageModel, this.pageAdvModel, event)
+        })
+        .onActionEnd(() => {
+          onActionEnd(this.pageModel, this.pageAdvModel)
         })
+    )
   }
--- a/sight_harmony/features/wdComponent/src/main/ets/utils/PullDownRefresh.ets
View file @e64e5af
+++ b/sight_harmony/features/wdComponent/src/main/ets/utils/PullDownRefresh.ets
View file @e64e5af
@@ -4,7 +4,87 @@ import PageModel from '../viewmodel/PageModel';
 import PageHelper from '../viewmodel/PageHelper';
 import PageAdModel from '../viewmodel/PageAdvModel';
 import { LoadStatus } from '../components/refresh/RefreshLayoutBean';
+import { Logger } from 'wdKit/Index';
+
+/***********新的下拉、上拉手势 start **********/
+export function onActionStart(pageModel: PageModel, pageAdvModel: PageAdModel, event?: GestureEvent) {
+  if (event === undefined) {
+    return
+  }
+  pageModel.downY = event.offsetY;
+  pageModel.lastMoveY = event.offsetY;
+}
+
+export function onActionUpdate(pageModel: PageModel, pageAdvModel: PageAdModel, event?: GestureEvent) {
+  if (event === undefined) {
+    return
+  }
+  if ((pageModel.isRefreshing === true) || (pageModel.isLoading === true)) {
+    return;
+  }
+  let isDownPull = event.offsetY - pageModel.lastMoveY > 0;
+  if (((isDownPull === true) || (pageModel.isPullRefreshOperation === true)) &&
+    (pageModel.isCanLoadMore === false)) {
+    actionUpdatePullRefresh(pageModel, event);
+  } else {
+    actionUpdateLoadMore(pageModel, event);
+  }
+  pageModel.lastMoveY = event.offsetY;
+}
+
+export function onActionEnd(pageModel: PageModel, pageAdvModel: PageAdModel) {
+  if ((pageModel.isRefreshing === true) || (pageModel.isLoading === true)) {
+    return;
+  }
+  if ((pageModel.isPullRefreshOperation === true)) {
+    touchUpPullRefresh(pageModel, pageAdvModel);
+  } else {
+    // touchUpLoadMore(pageModel);
+  }
+}
+
+export function actionUpdatePullRefresh(pageModel: PageModel, event: GestureEvent) {
+  if (pageModel.startIndex === 0) {
+    pageModel.isPullRefreshOperation = true;
+    let height = vp2px(Const.CUSTOM_REFRESH_DECIDE_HEIGHT);
+    pageModel.offsetY = event.offsetY - pageModel.downY;
+    if (pageModel.offsetY >= height) {
+      pullRefreshState(pageModel, RefreshState.Release);
+      pageModel.offsetY = height + pageModel.offsetY * Const.Y_OFF_SET_COEFFICIENT;
+    } else {
+      pullRefreshState(pageModel, RefreshState.DropDown);
+    }
+    if (pageModel.offsetY < 0) {
+      pageModel.offsetY = 0;
+      pageModel.isPullRefreshOperation = false;
+    }
+  }
+}
+
+export function actionUpdateLoadMore(model: PageModel, event: GestureEvent) {
+  // list size +1
+  if (model.endIndex >= model.compList.totalCount() - 3 && model.endIndex <= model.compList.totalCount()) {
+    // model.offsetY = event.touches[0].y - model.downY;
+    // if (Math.abs(model.offsetY) > vp2px(model.pullUpLoadHeight) / 2) {
+    //   model.isCanLoadMore = true;
+    //   model.isVisiblePullUpLoad = true;
+    //   model.offsetY = -vp2px(model.pullUpLoadHeight) + model.offsetY * Const.Y_OFF_SET_COEFFICIENT;
+    // }
+
+    // 不用分页动画，直接预加载
+    model.isCanLoadMore = true;
+    model.isVisiblePullUpLoad = true;
+    touchUpLoadMore(model);
+  }
+}
+
+/***********新的下拉、上拉手势 end **********/
+
+
 //下拉刷新上拉加载更多组件
+/**
+ * @deprecated
+ */
 export function listTouchEvent(pageModel: PageModel, pageAdvModel: PageAdModel, event: TouchEvent) {
   switch (event.type) {
     case TouchType.Down:
@@ -16,7 +96,8 @@ export function listTouchEvent(pageModel: PageModel, pageAdvModel: PageAdModel, 
         return;
       }
       let isDownPull = event.touches[0].y - pageModel.lastMoveY > 0;
-      if (((isDownPull === true) || (pageModel.isPullRefreshOperation === true)) && (pageModel.isCanLoadMore === false)) {
+      if (((isDownPull === true) || (pageModel.isPullRefreshOperation === true)) &&
+        (pageModel.isCanLoadMore === false)) {
         // Finger movement, processing pull-down refresh.
         touchMovePullRefresh(pageModel, event);
       } else {
@@ -44,6 +125,9 @@ export function listTouchEvent(pageModel: PageModel, pageAdvModel: PageAdModel, 
   }
 }
+/**
+ * @deprecated
+ */
 export function touchMovePullRefresh(pageModel: PageModel, event: TouchEvent) {
   if (pageModel.startIndex === 0) {
     pageModel.isPullRefreshOperation = true;