添加无数据展示；新增下拉刷新、上拉加载更多功能，loading样式后面再调。

@@ -46,7 +46,7 @@ export struct EmptyComponent {
 
 
       Text(this.buildNoDataTip())
       Text(this.buildNoDataTip())
         .fontSize($r('app.float.normal_text_size'))
         .fontSize($r('app.float.normal_text_size'))
-        .fontColor('#B2B2B2')
+        .fontColor('#000000')
         .fontWeight(FontWeight.Normal)
         .fontWeight(FontWeight.Normal)
         .opacity(this.TEXT_OPACITY)
         .opacity(this.TEXT_OPACITY)
         .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP })
         .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP })

@@ -5,44 +5,99 @@ import PageViewModel from '../viewmodel/PageViewModel';
 import { EmptyComponent } from './EmptyComponent';
 import { EmptyComponent } from './EmptyComponent';
 import { ErrorComponent } from './ErrorComponent';
 import { ErrorComponent } from './ErrorComponent';
 import { LabelComponent } from './LabelComponent';
 import { LabelComponent } from './LabelComponent';
-import { LoadingComponent } from './LoadingComponent';
 import { TitleAbbrComponent } from './TitleAbbrComponent';
 import { TitleAbbrComponent } from './TitleAbbrComponent';
 import { TitleAllComponent } from './TitleAllComponent';
 import { TitleAllComponent } from './TitleAllComponent';
-import {BannerComponent} from './BannerComponent'
+import { BannerComponent } from './BannerComponent'
+import PageModel from '../viewmodel/PageModel';
+import { listTouchEvent } from '../utils/PullDownRefresh';
+import RefreshLayout from './page/RefreshLayout';
+import { RefreshLayoutBean } from './page/RefreshLayoutBean';
+import NoMoreLayout from './page/NoMoreLayout';
+import LoadMoreLayout from './page/LoadMoreLayout';
+import CustomRefreshLoadLayout from './page/CustomRefreshLoadLayout';
 
 
 const TAG = 'PageComponent';
 const TAG = 'PageComponent';
 
 
 @Component
 @Component
 export struct PageComponent {
 export struct PageComponent {
-  @State viewType: number = ViewType.LOADED;
+  // @State viewType: number = ViewType.LOADING;
   // Group数据及子组件数据
   // Group数据及子组件数据
-  @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
-  @State currentTopNavSelectedIndex: number = 0;
-  @State pageId: string = "";
-  @State channelId: string = "";
+  // @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
+  @State private pageModel: PageModel = new PageModel();
+  currentTopNavSelectedIndex: number = 0;
+  pageId: string = "";
+  channelId: string = "";
 
 
   // @Link @Watch('onChange') paIndex:number
   // @Link @Watch('onChange') paIndex:number
 
 
   build() {
   build() {
-    if (this.viewType == ViewType.LOADING) {
-      LoadingComponent()
-    } else if (this.viewType == ViewType.ERROR) {
+    Column() {
+      if (this.pageModel.viewType == ViewType.LOADING) {
+        // LoadingComponent()
+        this.LoadingLayout()
+      } else if (this.pageModel.viewType == ViewType.ERROR) {
         ErrorComponent()
         ErrorComponent()
-    } else if (this.viewType == ViewType.EMPTY) {
+      } else if (this.pageModel.viewType == ViewType.EMPTY) {
         EmptyComponent()
         EmptyComponent()
       } else {
       } else {
+        this.ListLayout()
+      }
+    }
+    .width(CommonConstants.FULL_PARENT)
+    .height(CommonConstants.FULL_PARENT)
+    .onTouch((event: TouchEvent | undefined) => {
+      if (event) {
+        if (this.pageModel.viewType === ViewType.LOADED) {
+          listTouchEvent(this.pageModel, event);
+        }
+      }
+    })
+
+  }
+
+  @Builder ListLayout() {
     List() {
     List() {
-        LazyForEach(this.compList, (compDTO: CompDTO, compIndex: number) => {
+      // 下拉刷新
+      ListItem() {
+        RefreshLayout({
+          refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
+            this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
+        })
+      }
+
+      LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
         ListItem() {
         ListItem() {
           Column() {
           Column() {
             this.componentBuilder(compDTO, compIndex)
             this.componentBuilder(compDTO, compIndex)
           }
           }
         }
         }
       })
       })
+
+      // 加载更多
+      ListItem() {
+        if (this.pageModel.hasMore) {
+          LoadMoreLayout({
+            refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
+              this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
+          })
+        } else {
+          NoMoreLayout()
+        }
+      }
     }
     }
     .cachedCount(5)
     .cachedCount(5)
     .height(CommonConstants.FULL_PARENT)
     .height(CommonConstants.FULL_PARENT)
+    .onScrollIndex((start: number, end: number) => {
+      // Listen to the first index of the current list.
+      this.pageModel.startIndex = start;
+      // 包含了 头尾item，判断时需要考虑+2
+      this.pageModel.endIndex = end;
+    })
   }
   }
+
+  @Builder LoadingLayout() {
+    CustomRefreshLoadLayout({ refreshBean: new RefreshLayoutBean(true,
+      $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight) })
   }
   }
 
 
   @Builder
   @Builder
@@ -53,7 +108,7 @@ export struct PageComponent {
       TitleAbbrComponent({ compDTO: compDTO })
       TitleAbbrComponent({ compDTO: compDTO })
     } else if (compDTO.compStyle === CompStyle.Title_All_01) {
     } else if (compDTO.compStyle === CompStyle.Title_All_01) {
       TitleAllComponent({ compDTO: compDTO })
       TitleAllComponent({ compDTO: compDTO })
-    } else if(compDTO.compStyle === CompStyle.Carousel_Layout_01) {
+    } else if (compDTO.compStyle === CompStyle.Carousel_Layout_01) {
       BannerComponent({ compDTO: compDTO })
       BannerComponent({ compDTO: compDTO })
     } else {
     } else {
       // todo:组件未实现 / Component Not Implemented
       // todo:组件未实现 / Component Not Implemented
@@ -65,27 +120,25 @@ export struct PageComponent {
   }
   }
 
 
   async aboutToAppear() {
   async aboutToAppear() {
-    Logger.info(TAG, `aboutToAppear, this.pageId: ${this.viewType} this.currentTopNavSelectedIndex: ${this.currentTopNavSelectedIndex}`);
-    // if (this.currentTopNavSelectedIndex === 1) { // 顶导tab的第0个item是【热点】，第1个item是【推荐】
-    //   this.compList.replaceAll()
-    //   let pageDto = await PageViewModel.getPageData2(getContext(this))
-    //   if (pageDto && pageDto.compList) {
-    //     this.compList.push(...pageDto.compList)
-    //   }
-    // } else {
-    //   let pageDto = await PageViewModel.getPageData1(getContext(this))
-    //   if (pageDto && pageDto.compList) {
-    //     this.compList.push(...pageDto.compList)
-    //   }
-    // }
-
-    // if (this.currentTopNavSelectedIndex != 1) { // 顶导tab的第0个item是【热点】，第1个item是【推荐】
-    //   return
-    // }
-    Logger.debug(TAG,'lllllalalal: ' + this.pageId+' , ' + this.channelId);
-    let pageDto = await PageViewModel.getPageData(this.pageId, this.pageId, this.channelId, getContext(this))
-    if (pageDto && pageDto.compList) {
-      this.compList.push(...pageDto.compList)
+    Logger.info(TAG, `aboutToAppear id: ${this.pageId} , ${this.channelId} , navIndex: ${this.currentTopNavSelectedIndex}`);
+    this.pageModel.pageId = this.pageId;
+    this.pageModel.groupId = this.pageId;
+    this.pageModel.channelId = this.channelId;
+    this.pageModel.currentPage = 1;
+    let pageDto = await PageViewModel.getPageData(this.pageModel.pageId, this.pageModel.pageId, this.pageModel.channelId
+      , this.pageModel.currentPage, this.pageModel.pageSize, getContext(this))
+    if (pageDto && pageDto.compList && pageDto.compList.length > 0) {
+      this.pageModel.viewType = ViewType.LOADED;
+      this.pageModel.compList.push(...pageDto.compList)
+      if (pageDto.compList.length === this.pageModel.pageSize) {
+        this.pageModel.currentPage++;
+        this.pageModel.hasMore = true;
+      } else {
+        this.pageModel.hasMore = false;
+      }
+    } else {
+      Logger.debug(TAG, 'aboutToAppear, data response page ' + this.pageId + ', comp list is empty.');
+      this.pageModel.viewType = ViewType.EMPTY;
     }
     }
   }
   }
 }
 }

+import { RefreshConstants } from '../../utils/RefreshConstants';
+import { RefreshLayoutBean } from './RefreshLayoutBean';
+
+/**
+ * Custom layout to show refresh or load.
+ */
+@Component
+export default struct CustomLayout {
+  @ObjectLink refreshBean: RefreshLayoutBean;
+
+  build() {
+    Row() {
+      Image(this.refreshBean.imageSrc)
+        .width(RefreshConstants.RefreshLayout_IMAGE_WIDTH)
+        .height(RefreshConstants.RefreshLayout_IMAGE_HEIGHT)
+
+      Text(this.refreshBean.textValue)
+        .margin({
+          left: RefreshConstants.RefreshLayout_TEXT_MARGIN_LEFT,
+          bottom: RefreshConstants.RefreshLayout_TEXT_MARGIN_BOTTOM
+        })
+        .fontSize(RefreshConstants.RefreshLayout_TEXT_FONT_SIZE)
+        .textAlign(TextAlign.Center)
+    }
+    .clip(true)
+    .width(RefreshConstants.FULL_WIDTH)
+    .justifyContent(FlexAlign.Center)
+    .height(this.refreshBean.heightValue)
+  }
+}

+import CustomRefreshLoadLayout from './CustomRefreshLoadLayout';
+import { RefreshLayoutBean } from './RefreshLayoutBean';
+
+/**
+ * The load more layout component.
+ */
+@Component
+export default struct LoadMoreLayout {
+  @ObjectLink refreshBean: RefreshLayoutBean;
+
+  build() {
+    Column() {
+      if (this.refreshBean.isVisible) {
+        CustomRefreshLoadLayout({
+          refreshBean: new RefreshLayoutBean(this.refreshBean.isVisible,
+            this.refreshBean.imageSrc, this.refreshBean.textValue, this.refreshBean.heightValue)
+        })
+      } else {
+        CustomRefreshLoadLayout({
+          refreshBean: new RefreshLayoutBean(this.refreshBean.isVisible,
+            this.refreshBean.imageSrc, this.refreshBean.textValue, 0)
+        })
+      }
+    }
+  }
+}

+import { RefreshConstants } from '../../utils/RefreshConstants'
+
+/**
+ * The No more data layout component.
+ */
+@Component
+export default struct NoMoreLayout {
+  build() {
+    Row() {
+      Text($r('app.string.footer_text'))
+        .margin({ left: RefreshConstants.NoMoreLayoutConstant_NORMAL_PADDING })
+        .fontSize(RefreshConstants.NoMoreLayoutConstant_TITLE_FONT)
+        .textAlign(TextAlign.Center)
+    }
+    .width(RefreshConstants.FULL_WIDTH)
+    .justifyContent(FlexAlign.Center)
+    .height(RefreshConstants.CUSTOM_LAYOUT_HEIGHT)
+  }
+}

+import CustomRefreshLoadLayout from './CustomRefreshLoadLayout';
+import { RefreshLayoutBean } from './RefreshLayoutBean';
+
+/**
+ * The refresh layout component.
+ */
+@Component
+export default struct RefreshLayout {
+  @ObjectLink refreshBean: RefreshLayoutBean;
+
+  build() {
+    Column() {
+      if (this.refreshBean.isVisible) {
+        CustomRefreshLoadLayout({ refreshBean: new RefreshLayoutBean
+        (this.refreshBean.isVisible, this.refreshBean.imageSrc, this.refreshBean.textValue,
+          this.refreshBean.heightValue) })
+      }
+    }
+  }
+}

+/**
+ * Custom refresh load layout data.
+ */
+@Observed
+export class RefreshLayoutBean {
+  /**
+   * Custom refresh load layout isVisible.
+   */
+  isVisible: boolean;
+
+  /**
+   * Custom refresh load layout imageSrc.
+   */
+  imageSrc: Resource;
+
+  /**
+   * Custom refresh load layout textValue.
+   */
+  textValue: Resource;
+
+  /**
+   * Custom refresh load layout heightValue.
+   */
+  heightValue: number;
+
+  constructor(isVisible: boolean, imageSrc: Resource, textValue: Resource, heightValue: number) {
+    this.isVisible = isVisible;
+    this.imageSrc = imageSrc;
+    this.textValue = textValue;
+    this.heightValue = heightValue;
+  }
+}

@@ -46,7 +46,12 @@ export class HttpUrlUtils {
     // TODO 判断是否登录
     // TODO 判断是否登录
     headers.set('userId', this.getUserId())
     headers.set('userId', this.getUserId())
     headers.set('userType', this.getUserType())
     headers.set('userType', this.getUserType())
-    Logger.debug("TAG", 'getCommonHeaders headers: ' + headers);
+
+    // Logger.debug("TAG", '******************* commonHeaders headers start ******************************** ');
+    // headers.forEach((v,k)=>{
+    //   Logger.debug("TAG", 'getCommonHeaders header: ' + k + ': ' + v);
+    // })
+    // Logger.debug("TAG", '******************* commonHeaders headers end ******************************** ');
     return headers;
     return headers;
   }
   }
 
 
@@ -55,18 +60,21 @@ export class HttpUrlUtils {
     return this.HOST + this.BOTTOM_NAV_PATH;
     return this.HOST + this.BOTTOM_NAV_PATH;
   }
   }
 
 
-  static getCompInfoUrl(pageId: string, groupId: string, channelId: string) {
+  static getCompInfoUrl(pageId: string, groupId: string, channelId: string, currentPage: number
+                        , pageSize: number) {
     let url = this.HOST + this.COMP_PATH;
     let url = this.HOST + this.COMP_PATH;
-    // TODO 暂定只请求第一页，后续对接分页加载，参数再调整
-    url = url + "?channelStrategy=2&pageSize=20&pageNum=1&loadStrategy=first_load"
+    // TODO 暂定只请求第一页，后续对接分页加载，参数再调整 first_load？
+    url = url + "?channelStrategy=2&loadStrategy=first_load"
     + "&districtCode=" + this.getDistrictCode()
     + "&districtCode=" + this.getDistrictCode()
     + "&provinceCode=" + this.getProvinceCode()
     + "&provinceCode=" + this.getProvinceCode()
     + "&cityCode=" + this.getCityCode()
     + "&cityCode=" + this.getCityCode()
-    // + "&refreshTime=" + DateTimeUtils.getCurrentTimeMillis()
-    + "&refreshTime=" + "1703472405653"
+    + "&refreshTime=" + DateTimeUtils.getCurrentTimeMillis()
     + "&pageId=" + pageId
     + "&pageId=" + pageId
     + "&groupId=" + groupId
     + "&groupId=" + groupId
-    + "&channelId=" + channelId;
+    + "&channelId=" + channelId
+    + "&pageSize=" + pageSize
+    + "&pageNum=" + currentPage;
+    // Logger.debug("TAG", 'getCompInfoUrl url: '+url);
     return url;
     return url;
   }
   }
 
 
@@ -87,6 +95,7 @@ export class HttpUrlUtils {
 
 
   private static getTimestamp() {
   private static getTimestamp() {
     // return DateTimeUtils.getCurrentTime() + '';
     // return DateTimeUtils.getCurrentTime() + '';
+    // TODO 暂时写死，有些page 真实时间戳 返回数据为空
     return '155203523';
     return '155203523';
   }
   }
 
 

@@ -11,8 +11,9 @@ export class PageRepository {
     return WDHttp.get<ResponseDTO<NavigationBodyDTO>>(url, headers)
     return WDHttp.get<ResponseDTO<NavigationBodyDTO>>(url, headers)
   };
   };
 
 
-  static fetchPageData(pageId: string, groupId: string, channelId: string) {
-    let url = HttpUrlUtils.getCompInfoUrl(pageId, groupId, channelId)
+  static fetchPageData(pageId: string, groupId: string, channelId: string, currentPage: number
+                       , pageSize: number) {
+    let url = HttpUrlUtils.getCompInfoUrl(pageId, groupId, channelId, currentPage, pageSize)
     let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
     let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
     return WDHttp.get<ResponseDTO<PageDTO>>(url, headers)
     return WDHttp.get<ResponseDTO<PageDTO>>(url, headers)
   };
   };

+import promptAction from '@ohos.promptAction';
+import PageModel from '../viewmodel/PageModel';
+import { RefreshConstants as Const, RefreshState } from './RefreshConstants';
+import PageViewModel from '../viewmodel/PageViewModel';
+import { PageDTO } from '../repository/bean/PageDTO';
+import { touchMoveLoadMore, touchUpLoadMore } from './PullUpLoadMore';
+
+export function listTouchEvent(pageModel: PageModel, event: TouchEvent) {
+  switch (event.type) {
+    case TouchType.Down:
+      pageModel.downY = event.touches[0].y;
+      pageModel.lastMoveY = event.touches[0].y;
+      break;
+    case TouchType.Move:
+      if ((pageModel.isRefreshing === true) || (pageModel.isLoading === true)) {
+        return;
+      }
+      let isDownPull = event.touches[0].y - pageModel.lastMoveY > 0;
+      if (((isDownPull === true) || (pageModel.isPullRefreshOperation === true)) && (pageModel.isCanLoadMore === false)) {
+        // Finger movement, processing pull-down refresh.
+        touchMovePullRefresh(pageModel, event);
+      } else {
+        // Finger movement, processing load more.
+        touchMoveLoadMore(pageModel, event);
+      }
+      pageModel.lastMoveY = event.touches[0].y;
+      break;
+    case TouchType.Cancel:
+      break;
+    case TouchType.Up:
+      if ((pageModel.isRefreshing === true) || (pageModel.isLoading === true)) {
+        return;
+      }
+      if ((pageModel.isPullRefreshOperation === true)) {
+        // Lift your finger and pull down to refresh.
+        touchUpPullRefresh(pageModel);
+      } else {
+        // Fingers up, handle loading more.
+        touchUpLoadMore(pageModel);
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+export function touchMovePullRefresh(pageModel: PageModel, event: TouchEvent) {
+  if (pageModel.startIndex === 0) {
+    pageModel.isPullRefreshOperation = true;
+    let height = vp2px(pageModel.pullDownRefreshHeight);
+    pageModel.offsetY = event.touches[0].y - pageModel.downY;
+    // The sliding offset is greater than the pull-down refresh layout height, and the refresh condition is met.
+    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 touchUpPullRefresh(pageModel: PageModel) {
+  if (pageModel.isCanRefresh === true) {
+    pageModel.offsetY = vp2px(pageModel.pullDownRefreshHeight);
+    pullRefreshState(pageModel, RefreshState.Refreshing);
+    pageModel.currentPage = 1;
+    setTimeout(() => {
+      let self: PageModel = pageModel;
+
+      PageViewModel.getPageData(self.pageId, self.groupId, self.channelId, self.currentPage, self.pageSize)
+        .then((data: PageDTO) => {
+          if (data == null || data.compList == null || data.compList.length == 0) {
+            self.hasMore = false;
+          } else {
+            if (data.compList.length == self.pageSize) {
+              self.currentPage++;
+              self.hasMore = true;
+            } else {
+              self.hasMore = false;
+            }
+            // 刷新，替换所有数据
+            self.compList.replaceAll(...data.compList)
+          }
+          closeRefresh(self, true);
+        }).catch((err: string | Resource) => {
+        promptAction.showToast({ message: err });
+        closeRefresh(self, false);
+      });
+    }, Const.DELAY_TIME);
+  } else {
+    closeRefresh(pageModel, false);
+  }
+}
+
+export function pullRefreshState(pageModel: PageModel, state: number) {
+  switch (state) {
+    case RefreshState.DropDown:
+      pageModel.pullDownRefreshText = $r('app.string.pull_down_refresh_text');
+      pageModel.pullDownRefreshImage = $r('app.media.ic_pull_down_refresh');
+      pageModel.isCanRefresh = false;
+      pageModel.isRefreshing = false;
+      pageModel.isVisiblePullDown = true;
+      break;
+    case RefreshState.Release:
+      pageModel.pullDownRefreshText = $r('app.string.release_refresh_text');
+      pageModel.pullDownRefreshImage = $r('app.media.ic_pull_up_refresh');
+      pageModel.isCanRefresh = true;
+      pageModel.isRefreshing = false;
+      break;
+    case RefreshState.Refreshing:
+      pageModel.offsetY = vp2px(pageModel.pullDownRefreshHeight);
+      pageModel.pullDownRefreshText = $r('app.string.refreshing_text');
+      pageModel.pullDownRefreshImage = $r('app.media.ic_pull_up_load');
+      pageModel.isCanRefresh = true;
+      pageModel.isRefreshing = true;
+      break;
+    case RefreshState.Success:
+      pageModel.pullDownRefreshText = $r('app.string.refresh_success_text');
+      pageModel.pullDownRefreshImage = $r('app.media.ic_succeed_refresh');
+      pageModel.isCanRefresh = true;
+      pageModel.isRefreshing = true;
+      break;
+    case RefreshState.Fail:
+      pageModel.pullDownRefreshText = $r('app.string.refresh_fail_text');
+      pageModel.pullDownRefreshImage = $r('app.media.ic_fail_refresh');
+      pageModel.isCanRefresh = true;
+      pageModel.isRefreshing = true;
+      break;
+    default:
+      break;
+  }
+}
+
+export function closeRefresh(pageModel: PageModel, isRefreshSuccess: boolean) {
+  let self = pageModel;
+  setTimeout(() => {
+    let delay = Const.RefreshConstant_DELAY_PULL_DOWN_REFRESH;
+    if (self.isCanRefresh === true) {
+      pullRefreshState(pageModel, isRefreshSuccess ? RefreshState.Success : RefreshState.Fail);
+      delay = Const.RefreshConstant_DELAY_SHRINK_ANIMATION_TIME;
+    }
+    animateTo({
+      duration: Const.RefreshConstant_CLOSE_PULL_DOWN_REFRESH_TIME,
+      delay: delay,
+      onFinish: () => {
+        pullRefreshState(pageModel, RefreshState.DropDown);
+        self.isVisiblePullDown = false;
+        self.isPullRefreshOperation = false;
+      }
+    }, () => {
+      self.offsetY = 0;
+    })
+  }, self.isCanRefresh ? Const.DELAY_ANIMATION_DURATION : 0);
+}

+import promptAction from '@ohos.promptAction';
+import PageModel from '../viewmodel/PageModel';
+import { RefreshConstants as Const } from './RefreshConstants';
+import PageViewModel from '../viewmodel/PageViewModel';
+import { PageDTO } from '../repository/bean/PageDTO';
+
+export function touchMoveLoadMore(model: PageModel, event: TouchEvent) {
+  // list size +1
+  if (model.endIndex === model.compList.size() || model.endIndex === model.compList.size() + 1) {
+    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;
+    }
+  }
+}
+
+export function touchUpLoadMore(model: PageModel) {
+  let self: PageModel = model;
+  animateTo({
+    duration: Const.ANIMATION_DURATION,
+  }, () => {
+    self.offsetY = 0;
+  })
+  if ((self.isCanLoadMore === true) && (self.hasMore === true)) {
+    self.isLoading = true;
+    setTimeout(() => {
+      closeLoadMore(model);
+      PageViewModel.getPageData(self.pageId, self.groupId, self.channelId, self.currentPage, self.pageSize)
+        .then((data: PageDTO) => {
+          if (data == null || data.compList == null || data.compList.length == 0) {
+            self.hasMore = false;
+          } else {
+            if (data.compList.length == self.pageSize) {
+              self.currentPage++;
+              self.hasMore = true;
+            } else {
+              self.hasMore = false;
+            }
+            self.compList.push(...data.compList)
+          }
+        }).catch((err: string | Resource) => {
+        promptAction.showToast({ message: err });
+      })
+    }, Const.DELAY_TIME);
+  } else {
+    closeLoadMore(self);
+  }
+}
+
+export function closeLoadMore(model: PageModel) {
+  model.isCanLoadMore = false;
+  model.isLoading = false;
+  model.isVisiblePullUpLoad = false;
+}

+/**
+ * The constant of refresh.
+ */
+export class RefreshConstants {
+  /**
+   * The off set coefficient.
+   */
+  static readonly Y_OFF_SET_COEFFICIENT: number = 0.1;
+  /**
+   * The animation delay time.
+   */
+  static readonly DELAY_ANIMATION_DURATION: number = 300;
+  /**
+   * The delay time.
+   */
+  static readonly DELAY_TIME: number = 1000;
+
+  /**
+   * The animation duration.
+   */
+  static readonly ANIMATION_DURATION: number = 2000;
+  /**
+   * The RefreshConstant constants.
+   */
+  static readonly RefreshConstant_DELAY_PULL_DOWN_REFRESH: number = 50;
+  static readonly RefreshConstant_CLOSE_PULL_DOWN_REFRESH_TIME: number = 150;
+  static readonly RefreshConstant_DELAY_SHRINK_ANIMATION_TIME: number = 500;
+
+  /**
+   * The page size.
+   */
+  static readonly PAGE_SIZE: number = 20;
+
+  /**
+   * The refresh and load height.
+   */
+  static readonly CUSTOM_LAYOUT_HEIGHT: number = 70;
+  /**
+   * Full the width.
+   */
+  static readonly FULL_WIDTH: string = '100%';
+  /**
+   * The NoMoreLayout constants.
+   */
+  static readonly NoMoreLayoutConstant_NORMAL_PADDING: number = 8;
+  static readonly NoMoreLayoutConstant_TITLE_FONT: string = '16fp';
+
+  /**
+   * The RefreshLayout constants.
+   */
+  static readonly RefreshLayout_MARGIN_LEFT: string = '40%';
+  static readonly RefreshLayout_TEXT_MARGIN_BOTTOM: number = 1;
+  static readonly RefreshLayout_TEXT_MARGIN_LEFT: number = 7;
+  static readonly RefreshLayout_TEXT_FONT_SIZE: number = 17;
+  static readonly RefreshLayout_IMAGE_WIDTH: number = 18;
+  static readonly RefreshLayout_IMAGE_HEIGHT: number = 18;
+}
+/**
+ * The refresh state enum.
+ */
+export const enum RefreshState {
+  DropDown = 0,
+  Release = 1,
+  Refreshing = 2,
+  Success = 3,
+  Fail = 4
+}

+import { ViewType } from 'wdConstant/src/main/ets/enum/ViewType';
+import { LazyDataSource } from 'wdKit';
+import { CompDTO } from '../repository/bean/CompDTO';
+import { RefreshConstants as Const } from '../utils/RefreshConstants';
+
+export default class PageModel {
+  pageId: string = "";
+  groupId: string = "";
+  channelId: string = "";
+  compList: LazyDataSource<CompDTO> = new LazyDataSource();
+  currentPage: number = 1;
+  pageSize: number = Const.PAGE_SIZE;
+  pullDownRefreshText: Resource = $r('app.string.pull_down_refresh_text');
+  pullDownRefreshImage: Resource = $r('app.media.ic_pull_down_refresh');
+  pullDownRefreshHeight: number = Const.CUSTOM_LAYOUT_HEIGHT;
+  isVisiblePullDown: boolean = false;
+  pullUpLoadText: Resource = $r('app.string.pull_up_load_text');
+  pullUpLoadImage: Resource = $r('app.media.ic_pull_up_load');
+  pullUpLoadHeight: number = Const.CUSTOM_LAYOUT_HEIGHT;
+  isVisiblePullUpLoad: boolean = false;
+  offsetY: number = 0;
+  viewType: number = ViewType.LOADING;
+  hasMore: boolean = true;
+  startIndex = 0;
+  endIndex = 0;
+  downY = 0;
+  lastMoveY = 0;
+  isRefreshing: boolean = false;
+  isCanRefresh = false;
+  isPullRefreshOperation = false;
+  isLoading: boolean = false;
+  isCanLoadMore: boolean = false;
+}

@@ -67,7 +67,11 @@ export class PageViewModel extends BaseViewModel {
    *
    *
    * @return {GroupDTO} compRes.data
    * @return {GroupDTO} compRes.data
    */
    */
-  private async getPageData1(context?: Context): Promise<PageDTO> {
+  private async getPageData1(currentPage: number, context?: Context): Promise<PageDTO> {
+    if (currentPage > 1) {
+      // 加载更多，返回无数据
+      return {} as PageDTO
+    }
     let compRes: ResponseDTO<PageDTO> | null = await ResourcesUtils.getResourcesJson<ResponseDTO<PageDTO>>('comp_list0.json', context);
     let compRes: ResponseDTO<PageDTO> | null = await ResourcesUtils.getResourcesJson<ResponseDTO<PageDTO>>('comp_list0.json', context);
     if (!compRes || !compRes.data) {
     if (!compRes || !compRes.data) {
       Logger.info(TAG, `getCompList compRes is empty`);
       Logger.info(TAG, `getCompList compRes is empty`);
@@ -94,20 +98,23 @@ export class PageViewModel extends BaseViewModel {
     return compRes.data
     return compRes.data
   }
   }
 
 
-  async getPageData(pageId: string, groupId: string, channelId: string, context?: Context): Promise<PageDTO> {
-    Logger.error(TAG, 'getPageData pageId: ' + pageId);
+  async getPageData(pageId: string, groupId: string, channelId: string, currentPage: number
+                    , pageSize: number, context?: Context): Promise<PageDTO> {
+    Logger.debug(TAG, 'getPageData pageId: ' + pageId);
     if (mock_switch) {
     if (mock_switch) {
-      return this.getPageData1(context);
+      return this.getPageData1(currentPage, context);
     }
     }
     return new Promise<PageDTO>((success, error) => {
     return new Promise<PageDTO>((success, error) => {
-      PageRepository.fetchPageData(pageId, groupId, channelId).then((resDTO: ResponseDTO<PageDTO>) => {
+      PageRepository.fetchPageData(pageId, groupId, channelId, currentPage, pageSize)
+        .then((resDTO: ResponseDTO<PageDTO>) => {
           if (this.isRespondsInvalid(resDTO, 'getPageData')) {
           if (this.isRespondsInvalid(resDTO, 'getPageData')) {
             error("page data invalid");
             error("page data invalid");
             return
             return
           }
           }
           Logger.info(TAG, "getPageData then,resDTO.timeStamp:" + resDTO.timestamp);
           Logger.info(TAG, "getPageData then,resDTO.timeStamp:" + resDTO.timestamp);
           success(resDTO.data);
           success(resDTO.data);
-      }).catch((err: Error) => {
+        })
+        .catch((err: Error) => {
           Logger.error(TAG, `getPageData catch, error.name : ${err.name},  error.message:${err.message}`);
           Logger.error(TAG, `getPageData catch, error.name : ${err.name},  error.message:${err.message}`);
           error(err);
           error(err);
         })
         })

@@ -7,6 +7,30 @@
     {
     {
       "name": "footer_text",
       "name": "footer_text",
       "value": "已经到底了"
       "value": "已经到底了"
+    },
+    {
+      "name": "pull_up_load_text",
+      "value": "加载中..."
+    },
+    {
+      "name": "pull_down_refresh_text",
+      "value": "下拉刷新"
+    },
+    {
+      "name": "release_refresh_text",
+      "value": "松开刷新"
+    },
+    {
+      "name": "refreshing_text",
+      "value": "正在刷新"
+    },
+    {
+      "name": "refresh_success_text",
+      "value": "刷新成功"
+    },
+    {
+      "name": "refresh_fail_text",
+      "value": "刷新失败"
     }
     }
   ]
   ]
 }
 }

@@ -36,6 +36,10 @@ export class LazyDataSource<T> extends BasicDataSource<T> {
     return this.dataArray;
     return this.dataArray;
   }
   }
 
 
+  public size(): number {
+    return this.dataArray.length
+  }
+
   // 增加/插入1个Item/数据,若index为undefined,则在数据尾部增加1个元素;否则,在指定索引(可为负/或大于数组长度)位置插入1个元素
   // 增加/插入1个Item/数据,若index为undefined,则在数据尾部增加1个元素;否则,在指定索引(可为负/或大于数组长度)位置插入1个元素
   public addItem(data: T, index?: number): void {
   public addItem(data: T, index?: number): void {
     if (index == undefined) {
     if (index == undefined) {