Showing
2 changed files
with
146 additions
and
105 deletions
| @@ -7,6 +7,7 @@ import { ListHasNoMoreDataUI } from '../../reusable/ListHasNoMoreDataUI'; | @@ -7,6 +7,7 @@ import { ListHasNoMoreDataUI } from '../../reusable/ListHasNoMoreDataUI'; | ||
| 7 | import { FollowChildComponent } from '../follow/FollowChildComponent'; | 7 | import { FollowChildComponent } from '../follow/FollowChildComponent'; |
| 8 | import dataPreferences from '@ohos.data.preferences'; | 8 | import dataPreferences from '@ohos.data.preferences'; |
| 9 | import { EmptyComponent } from '../../view/EmptyComponent'; | 9 | import { EmptyComponent } from '../../view/EmptyComponent'; |
| 10 | +import { CustomPullToRefresh } from '../../reusable/CustomPullToRefresh'; | ||
| 10 | 11 | ||
| 11 | const TAG = "HomePageBottomFollowComponent" | 12 | const TAG = "HomePageBottomFollowComponent" |
| 12 | /** | 13 | /** |
| @@ -14,6 +15,7 @@ const TAG = "HomePageBottomFollowComponent" | @@ -14,6 +15,7 @@ const TAG = "HomePageBottomFollowComponent" | ||
| 14 | */ | 15 | */ |
| 15 | @Component | 16 | @Component |
| 16 | export struct HomePageBottomFollowComponent { | 17 | export struct HomePageBottomFollowComponent { |
| 18 | + private scroller: Scroller = new Scroller(); | ||
| 17 | @State data_follow: LazyDataSource<FollowListDetailItem> = new LazyDataSource(); | 19 | @State data_follow: LazyDataSource<FollowListDetailItem> = new LazyDataSource(); |
| 18 | @State isLoading: boolean = false | 20 | @State isLoading: boolean = false |
| 19 | @State hasMore: boolean = true | 21 | @State hasMore: boolean = true |
| @@ -104,61 +106,30 @@ export struct HomePageBottomFollowComponent { | @@ -104,61 +106,30 @@ export struct HomePageBottomFollowComponent { | ||
| 104 | }) | 106 | }) |
| 105 | }.layoutWeight(1) | 107 | }.layoutWeight(1) |
| 106 | } else { | 108 | } else { |
| 107 | - List({ space: 3 }) { | 109 | + CustomPullToRefresh({ |
| 110 | + alldata:this.data_follow, | ||
| 111 | + scroller:this.scroller, | ||
| 112 | + customList:()=>{ | ||
| 113 | + this.ListLayout() | ||
| 114 | + }, | ||
| 115 | + onRefresh:(resolve)=>{ | ||
| 116 | + this.curPageNum = 1; | ||
| 117 | + this.hasMore = true | ||
| 118 | + this.isGetRequest = false | ||
| 119 | + this.data_follow.clear() | ||
| 108 | 120 | ||
| 109 | - ListItem() { | ||
| 110 | - Row() { | ||
| 111 | - Text("关注更多人民号") | ||
| 112 | - .fontWeight('400lpx') | ||
| 113 | - .fontColor($r('app.color.color_222222')) | ||
| 114 | - .lineHeight('38lpx') | ||
| 115 | - .fontSize('27lpx') | ||
| 116 | - .textAlign(TextAlign.Center) | ||
| 117 | - .margin({ right: '4lpx' }) | ||
| 118 | - Image($r('app.media.arrow_icon_right')) | ||
| 119 | - .objectFit(ImageFit.Auto) | ||
| 120 | - .width('27lpx') | ||
| 121 | - .height('27lpx') | 121 | + if (!this.isLoading){ |
| 122 | + this.getNewPageData() | ||
| 123 | + if(resolve) resolve('刷新成功') | ||
| 122 | } | 124 | } |
| 123 | - .height('69lpx') | ||
| 124 | - .width('659lpx') | ||
| 125 | - .alignItems(VerticalAlign.Center) | ||
| 126 | - .justifyContent(FlexAlign.Center) | ||
| 127 | - .backgroundColor($r('app.color.color_F5F5F5')) | ||
| 128 | - .margin({ top: '31lpx', bottom: '4lpx' }) | ||
| 129 | - }.onClick(() => { | ||
| 130 | - let params = { 'index': "1" } as Record<string, string> | ||
| 131 | - WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params) | ||
| 132 | - }) | ||
| 133 | - | ||
| 134 | - LazyForEach(this.data_follow, (item: FollowListDetailItem, index: number = 0) => { | ||
| 135 | - ListItem() { | ||
| 136 | - FollowChildComponent({ data: item, type: 2 }) | 125 | + }, |
| 126 | + onLoadMore:(resolve)=> { | ||
| 127 | + console.log(TAG, "触底了"); | ||
| 128 | + if (!this.isLoading) { | ||
| 129 | + this.isLoading = true | ||
| 130 | + //加载分页数据 | ||
| 131 | + this.getNewPageData() | ||
| 137 | } | 132 | } |
| 138 | - }, (item: FollowListDetailItem, index: number) => index.toString()) | ||
| 139 | - | ||
| 140 | - //没有更多数据 显示提示 | ||
| 141 | - if (!this.hasMore) { | ||
| 142 | - ListItem() { | ||
| 143 | - ListHasNoMoreDataUI() | ||
| 144 | - } | ||
| 145 | - } | ||
| 146 | - } | ||
| 147 | - .cachedCount(15) | ||
| 148 | - .padding({ left: '31lpx', right: '31lpx' }) | ||
| 149 | - .layoutWeight(1) | ||
| 150 | - .scrollBar(BarState.Off) | ||
| 151 | - .edgeEffect(EdgeEffect.None) | ||
| 152 | - .nestedScroll({ | ||
| 153 | - scrollForward: NestedScrollMode.PARENT_FIRST, | ||
| 154 | - scrollBackward: NestedScrollMode.SELF_FIRST | ||
| 155 | - }) | ||
| 156 | - .onReachEnd(() => { | ||
| 157 | - console.log(TAG, "触底了"); | ||
| 158 | - if (!this.isLoading) { | ||
| 159 | - this.isLoading = true | ||
| 160 | - //加载分页数据 | ||
| 161 | - this.getNewPageData() | ||
| 162 | } | 133 | } |
| 163 | }) | 134 | }) |
| 164 | } | 135 | } |
| @@ -167,6 +138,56 @@ export struct HomePageBottomFollowComponent { | @@ -167,6 +138,56 @@ export struct HomePageBottomFollowComponent { | ||
| 167 | .width('100%') | 138 | .width('100%') |
| 168 | } | 139 | } |
| 169 | 140 | ||
| 141 | + @Builder ListLayout(){ | ||
| 142 | + List({ space: 3 ,scroller:this.scroller}) { | ||
| 143 | + ListItem() { | ||
| 144 | + Row() { | ||
| 145 | + Text("关注更多人民号") | ||
| 146 | + .fontWeight('400lpx') | ||
| 147 | + .fontColor($r('app.color.color_222222')) | ||
| 148 | + .lineHeight('38lpx') | ||
| 149 | + .fontSize('27lpx') | ||
| 150 | + .textAlign(TextAlign.Center) | ||
| 151 | + .margin({ right: '4lpx' }) | ||
| 152 | + Image($r('app.media.arrow_icon_right')) | ||
| 153 | + .objectFit(ImageFit.Auto) | ||
| 154 | + .width('27lpx') | ||
| 155 | + .height('27lpx') | ||
| 156 | + } | ||
| 157 | + .height('69lpx') | ||
| 158 | + .width('659lpx') | ||
| 159 | + .alignItems(VerticalAlign.Center) | ||
| 160 | + .justifyContent(FlexAlign.Center) | ||
| 161 | + .backgroundColor($r('app.color.color_F5F5F5')) | ||
| 162 | + .margin({ top: '31lpx', bottom: '4lpx' }) | ||
| 163 | + }.onClick(() => { | ||
| 164 | + let params = { 'index': "1" } as Record<string, string> | ||
| 165 | + WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params) | ||
| 166 | + }) | ||
| 167 | + | ||
| 168 | + LazyForEach(this.data_follow, (item: FollowListDetailItem, index: number = 0) => { | ||
| 169 | + ListItem() { | ||
| 170 | + FollowChildComponent({ data: item, type: 2 }) | ||
| 171 | + } | ||
| 172 | + }, (item: FollowListDetailItem, index: number) => index.toString()) | ||
| 173 | + //没有更多数据 显示提示 | ||
| 174 | + if (!this.hasMore) { | ||
| 175 | + ListItem() { | ||
| 176 | + ListHasNoMoreDataUI() | ||
| 177 | + } | ||
| 178 | + } | ||
| 179 | + } | ||
| 180 | + .cachedCount(15) | ||
| 181 | + .padding({ left: '31lpx', right: '31lpx' }) | ||
| 182 | + .layoutWeight(1) | ||
| 183 | + .scrollBar(BarState.Off) | ||
| 184 | + .edgeEffect(EdgeEffect.None) | ||
| 185 | + .nestedScroll({ | ||
| 186 | + scrollForward: NestedScrollMode.PARENT_FIRST, | ||
| 187 | + scrollBackward: NestedScrollMode.SELF_FIRST | ||
| 188 | + }) | ||
| 189 | + } | ||
| 190 | + | ||
| 170 | @Styles | 191 | @Styles |
| 171 | listStyle() { | 192 | listStyle() { |
| 172 | .backgroundColor(Color.White) | 193 | .backgroundColor(Color.White) |
| @@ -4,6 +4,7 @@ import { WDRouterRule, WDRouterPage } from 'wdRouter'; | @@ -4,6 +4,7 @@ import { WDRouterRule, WDRouterPage } from 'wdRouter'; | ||
| 4 | import MinePageDatasModel from '../../../model/MinePageDatasModel'; | 4 | import MinePageDatasModel from '../../../model/MinePageDatasModel'; |
| 5 | import { FollowListDetailItem } from '../../../viewmodel/FollowListDetailItem'; | 5 | import { FollowListDetailItem } from '../../../viewmodel/FollowListDetailItem'; |
| 6 | import { UserFollowListRequestItem } from '../../../viewmodel/UserFollowListRequestItem'; | 6 | import { UserFollowListRequestItem } from '../../../viewmodel/UserFollowListRequestItem'; |
| 7 | +import { CustomPullToRefresh } from '../../reusable/CustomPullToRefresh'; | ||
| 7 | import { ListHasNoMoreDataUI } from '../../reusable/ListHasNoMoreDataUI'; | 8 | import { ListHasNoMoreDataUI } from '../../reusable/ListHasNoMoreDataUI'; |
| 8 | import { EmptyComponent } from '../../view/EmptyComponent'; | 9 | import { EmptyComponent } from '../../view/EmptyComponent'; |
| 9 | import { FollowChildComponent } from '../follow/FollowChildComponent'; | 10 | import { FollowChildComponent } from '../follow/FollowChildComponent'; |
| @@ -22,7 +23,7 @@ export struct OtherHomePageBottomFollowComponent{ | @@ -22,7 +23,7 @@ export struct OtherHomePageBottomFollowComponent{ | ||
| 22 | @State count:number = 0; | 23 | @State count:number = 0; |
| 23 | @Prop curUserId: string | 24 | @Prop curUserId: string |
| 24 | @State isGetRequest:boolean = false | 25 | @State isGetRequest:boolean = false |
| 25 | - | 26 | + private scroller: Scroller = new Scroller(); |
| 26 | 27 | ||
| 27 | aboutToAppear(){ | 28 | aboutToAppear(){ |
| 28 | this.getNewPageData() | 29 | this.getNewPageData() |
| @@ -66,68 +67,87 @@ export struct OtherHomePageBottomFollowComponent{ | @@ -66,68 +67,87 @@ export struct OtherHomePageBottomFollowComponent{ | ||
| 66 | }.layoutWeight(1) | 67 | }.layoutWeight(1) |
| 67 | .justifyContent(FlexAlign.Start) | 68 | .justifyContent(FlexAlign.Start) |
| 68 | }else{ | 69 | }else{ |
| 69 | - List({ space: 3 }) { | ||
| 70 | - | ||
| 71 | - ListItem() { | ||
| 72 | - Row(){ | ||
| 73 | - Text("关注更多人民号") | ||
| 74 | - .fontWeight('400lpx') | ||
| 75 | - .fontColor($r('app.color.color_222222')) | ||
| 76 | - .lineHeight('38lpx') | ||
| 77 | - .fontSize('27lpx') | ||
| 78 | - .textAlign(TextAlign.Center) | ||
| 79 | - .margin({right:'4lpx'}) | ||
| 80 | - Image($r('app.media.arrow_icon_right')) | ||
| 81 | - .objectFit(ImageFit.Auto) | ||
| 82 | - .width('27lpx') | ||
| 83 | - .height('27lpx') | ||
| 84 | - }.height('69lpx') | ||
| 85 | - .width('659lpx') | ||
| 86 | - .alignItems(VerticalAlign.Center) | ||
| 87 | - .justifyContent(FlexAlign.Center) | ||
| 88 | - .backgroundColor($r('app.color.color_F5F5F5')) | ||
| 89 | - .margin({top:'31lpx',bottom:'4lpx'}) | ||
| 90 | - }.onClick(()=>{ | ||
| 91 | - let params = {'index': "1"} as Record<string, string>; | ||
| 92 | - WDRouterRule.jumpWithPage(WDRouterPage.followListPage,params) | ||
| 93 | - }) | 70 | + CustomPullToRefresh({ |
| 71 | + alldata:this.data_follow, | ||
| 72 | + scroller:this.scroller, | ||
| 73 | + customList:()=>{ | ||
| 74 | + this.ListLayout() | ||
| 75 | + }, | ||
| 76 | + onRefresh:(resolve)=>{ | ||
| 77 | + this.curPageNum = 1; | ||
| 78 | + this.hasMore = true | ||
| 79 | + this.isGetRequest = false | ||
| 80 | + this.data_follow.clear() | ||
| 94 | 81 | ||
| 95 | - LazyForEach(this.data_follow, (item: FollowListDetailItem, index: number = 0) => { | ||
| 96 | - ListItem() { | ||
| 97 | - FollowChildComponent({data: item,type:2}) | 82 | + if (!this.isLoading){ |
| 83 | + this.getNewPageData() | ||
| 84 | + if(resolve) resolve('刷新成功') | ||
| 98 | } | 85 | } |
| 99 | - .onClick(() => { | ||
| 100 | - }) | ||
| 101 | - }, (item: FollowListDetailItem, index: number) => index.toString()) | ||
| 102 | - | ||
| 103 | - //没有更多数据 显示提示 | ||
| 104 | - if(!this.hasMore){ | ||
| 105 | - ListItem(){ | ||
| 106 | - ListHasNoMoreDataUI() | 86 | + }, |
| 87 | + onLoadMore:(resolve)=> { | ||
| 88 | + console.log(TAG, "触底了"); | ||
| 89 | + if (!this.isLoading) { | ||
| 90 | + this.isLoading = true | ||
| 91 | + //加载分页数据 | ||
| 92 | + this.getNewPageData() | ||
| 107 | } | 93 | } |
| 108 | } | 94 | } |
| 109 | - }.cachedCount(15) | ||
| 110 | - .padding({left:'31lpx',right:'31lpx'}) | ||
| 111 | - .layoutWeight(1) | ||
| 112 | - .scrollBar(BarState.Off) | ||
| 113 | - .edgeEffect(EdgeEffect.None) | ||
| 114 | - .nestedScroll({ | ||
| 115 | - scrollForward: NestedScrollMode.PARENT_FIRST, | ||
| 116 | - scrollBackward: NestedScrollMode.SELF_FIRST | ||
| 117 | - }) | ||
| 118 | - .onReachEnd(()=>{ | ||
| 119 | - console.log(TAG,"触底了"); | ||
| 120 | - if(!this.isLoading){ | ||
| 121 | - this.isLoading = true | ||
| 122 | - //加载分页数据 | ||
| 123 | - this.getNewPageData() | ||
| 124 | - } | ||
| 125 | }) | 95 | }) |
| 126 | } | 96 | } |
| 127 | } | 97 | } |
| 128 | .width('100%') | 98 | .width('100%') |
| 129 | } | 99 | } |
| 130 | 100 | ||
| 101 | + @Builder ListLayout(){ | ||
| 102 | + List({ space: 3 ,scroller:this.scroller}) { | ||
| 103 | + ListItem() { | ||
| 104 | + Row(){ | ||
| 105 | + Text("关注更多人民号") | ||
| 106 | + .fontWeight('400lpx') | ||
| 107 | + .fontColor($r('app.color.color_222222')) | ||
| 108 | + .lineHeight('38lpx') | ||
| 109 | + .fontSize('27lpx') | ||
| 110 | + .textAlign(TextAlign.Center) | ||
| 111 | + .margin({right:'4lpx'}) | ||
| 112 | + Image($r('app.media.arrow_icon_right')) | ||
| 113 | + .objectFit(ImageFit.Auto) | ||
| 114 | + .width('27lpx') | ||
| 115 | + .height('27lpx') | ||
| 116 | + }.height('69lpx') | ||
| 117 | + .width('659lpx') | ||
| 118 | + .alignItems(VerticalAlign.Center) | ||
| 119 | + .justifyContent(FlexAlign.Center) | ||
| 120 | + .backgroundColor($r('app.color.color_F5F5F5')) | ||
| 121 | + .margin({top:'31lpx',bottom:'4lpx'}) | ||
| 122 | + }.onClick(()=>{ | ||
| 123 | + let params = {'index': "1"} as Record<string, string>; | ||
| 124 | + WDRouterRule.jumpWithPage(WDRouterPage.followListPage,params) | ||
| 125 | + }) | ||
| 126 | + | ||
| 127 | + LazyForEach(this.data_follow, (item: FollowListDetailItem, index: number = 0) => { | ||
| 128 | + ListItem() { | ||
| 129 | + FollowChildComponent({data: item,type:2}) | ||
| 130 | + } | ||
| 131 | + .onClick(() => { | ||
| 132 | + }) | ||
| 133 | + }, (item: FollowListDetailItem, index: number) => index.toString()) | ||
| 134 | + | ||
| 135 | + //没有更多数据 显示提示 | ||
| 136 | + if(!this.hasMore){ | ||
| 137 | + ListItem(){ | ||
| 138 | + ListHasNoMoreDataUI() | ||
| 139 | + } | ||
| 140 | + } | ||
| 141 | + }.cachedCount(15) | ||
| 142 | + .padding({left:'31lpx',right:'31lpx'}) | ||
| 143 | + .layoutWeight(1) | ||
| 144 | + .scrollBar(BarState.Off) | ||
| 145 | + .edgeEffect(EdgeEffect.None) | ||
| 146 | + .nestedScroll({ | ||
| 147 | + scrollForward: NestedScrollMode.PARENT_FIRST, | ||
| 148 | + scrollBackward: NestedScrollMode.SELF_FIRST | ||
| 149 | + }) | ||
| 150 | + } | ||
| 131 | 151 | ||
| 132 | @Styles | 152 | @Styles |
| 133 | listStyle() { | 153 | listStyle() { |
-
Please register or login to post a comment