wangliang_wd

feat:增加沉浸式视频下拉刷新

@@ -74,12 +74,17 @@ export struct VideoChannelDetail { @@ -74,12 +74,17 @@ export struct VideoChannelDetail {
74 @StorageLink('GestureLoadStrategy') GestureLoadStrategy: number = 0 74 @StorageLink('GestureLoadStrategy') GestureLoadStrategy: number = 0
75 @State timer: number = -1 75 @State timer: number = -1
76 76
  77 + ///视频下拉刷新
  78 + @State currentOffset: number = 0
  79 + @State endIndex: number = 0
  80 + @Link isRefreshList: boolean
77 autoRefreshChange() { 81 autoRefreshChange() {
78 if (this.topNavIndex === 0 && !this.isRequesting) { 82 if (this.topNavIndex === 0 && !this.isRequesting) {
79 this.data = [] 83 this.data = []
80 this.interactDataList = [] 84 this.interactDataList = []
81 this.totalCount = 0 85 this.totalCount = 0
82 this.isMouted = false 86 this.isMouted = false
  87 + this.isRefreshList = true
83 this.getRecCompInfo() 88 this.getRecCompInfo()
84 } 89 }
85 90
@@ -267,6 +272,7 @@ export struct VideoChannelDetail { @@ -267,6 +272,7 @@ export struct VideoChannelDetail {
267 }).catch(() => { 272 }).catch(() => {
268 // 获取内容失败请重试 273 // 获取内容失败请重试
269 this.isRequesting = false 274 this.isRequesting = false
  275 + this.isRefreshList = false
270 }) 276 })
271 } 277 }
272 278
@@ -276,6 +282,7 @@ export struct VideoChannelDetail { @@ -276,6 +282,7 @@ export struct VideoChannelDetail {
276 async batchContentDetail(list: batchContentDetailParams, list2: contentListParams) { 282 async batchContentDetail(list: batchContentDetailParams, list2: contentListParams) {
277 if (list.contents.length > 0) { 283 if (list.contents.length > 0) {
278 await ContentDetailRequest.batchContentDetail(list).then(async res => { 284 await ContentDetailRequest.batchContentDetail(list).then(async res => {
  285 + this.isRefreshList = false
279 if (res.data) { 286 if (res.data) {
280 await this.getContentInteract(list2) 287 await this.getContentInteract(list2)
281 this.data = this.data.concat(res.data) 288 this.data = this.data.concat(res.data)
@@ -289,6 +296,7 @@ export struct VideoChannelDetail { @@ -289,6 +296,7 @@ export struct VideoChannelDetail {
289 296
290 }) 297 })
291 } else { 298 } else {
  299 + this.isRefreshList = false
292 this.isRequesting = false 300 this.isRequesting = false
293 } 301 }
294 } 302 }
@@ -362,6 +370,16 @@ export struct VideoChannelDetail { @@ -362,6 +370,16 @@ export struct VideoChannelDetail {
362 this.getRecCompInfo() 370 this.getRecCompInfo()
363 } 371 }
364 }) 372 })
  373 + .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) =>{
  374 + console.log('视频tab下拉', index.toString() + extraInfo.currentOffset)
  375 + this.currentOffset = extraInfo.currentOffset
  376 + })
  377 + .onAnimationEnd((index: number)=>{
  378 + if (this.currentOffset > 0 && this.endIndex === 0) {
  379 + this.autoRefreshChange()
  380 + }
  381 + this.endIndex = index
  382 + })
365 // 作为手势动画的背景 383 // 作为手势动画的背景
366 Row() {} 384 Row() {}
367 .justifyContent(FlexAlign.Center) 385 .justifyContent(FlexAlign.Center)
@@ -6,7 +6,7 @@ import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'; @@ -6,7 +6,7 @@ import { BottomNavDTO, TopNavDTO } from 'wdBean/Index';
6 import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index'; 6 import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
7 import { WDRouterPage, WDRouterRule } from 'wdRouter'; 7 import { WDRouterPage, WDRouterRule } from 'wdRouter';
8 import { DisplayDirection ,BottomNavi} from 'wdConstant/Index'; 8 import { DisplayDirection ,BottomNavi} from 'wdConstant/Index';
9 -import { CompUtils, GrayManageModel, PageComponent } from 'wdComponent/Index'; 9 +import { CompUtils, GrayManageModel, LottieView, PageComponent } from 'wdComponent/Index';
10 import { TrackingButton, TrackConstants } from 'wdTracking/Index'; 10 import { TrackingButton, TrackConstants } from 'wdTracking/Index';
11 import { ParamType, Tracking } from 'wdTracking/Index'; 11 import { ParamType, Tracking } from 'wdTracking/Index';
12 import { ColorUtils } from 'wdComponent/src/main/ets/utils/ColorUtils'; 12 import { ColorUtils } from 'wdComponent/src/main/ets/utils/ColorUtils';
@@ -52,6 +52,7 @@ export struct VideoChannelPage { @@ -52,6 +52,7 @@ export struct VideoChannelPage {
52 GrayManage: SubscribedAbstractProperty<GrayManageModel> = AppStorage.link<GrayManageModel>('GrayManage') 52 GrayManage: SubscribedAbstractProperty<GrayManageModel> = AppStorage.link<GrayManageModel>('GrayManage')
53 @StorageLink('GestureLoadStrategy') GestureLoadStrategy: number = 0 53 @StorageLink('GestureLoadStrategy') GestureLoadStrategy: number = 0
54 54
  55 + @State isRefreshList: boolean = false
55 async aboutToAppear() { 56 async aboutToAppear() {
56 // 背景图高度 57 // 背景图高度
57 this.backgroundImageH = px2vp(this.topSafeHeight) + 44 58 this.backgroundImageH = px2vp(this.topSafeHeight) + 44
@@ -242,12 +243,29 @@ export struct VideoChannelPage { @@ -242,12 +243,29 @@ export struct VideoChannelPage {
242 243
243 // 搜索按钮 244 // 搜索按钮
244 Row() { 245 Row() {
245 - Image($r(this.isImmerseChannel() ? 'app.media.icon_search_gray_svg' :  
246 - 'app.media.icon_search'))  
247 - .colorFilter(this.isImmerseChannel() ? undefined :  
248 - ColorUtils.getDrawingColorFilter(this.getBothColor("")))  
249 - .width('24vp')  
250 - .height('24vp') 246 + if (this.isRefreshList){
  247 + LottieView({
  248 + name: 'VideoChannelPageLottie',
  249 + path: "lottie/refresh_step2.json",
  250 + lottieWidth: 40,
  251 + lottieHeight: 40,
  252 + autoplay: true,
  253 + loop: true,
  254 + })
  255 + }else {
  256 + Image($r(this.isImmerseChannel() ? 'app.media.icon_search_gray_svg' :
  257 + 'app.media.icon_search'))
  258 + .colorFilter(this.isImmerseChannel() ? undefined :
  259 + ColorUtils.getDrawingColorFilter(this.getBothColor("")))
  260 + .width('24vp')
  261 + .height('24vp')
  262 + .onClick(() => {
  263 + TrackingButton.searchClick(TrackConstants.PageName.Search, "VIDEOS")
  264 + let params = { 'tabName': "VIDEOS" } as Record<string, string>
  265 + WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)
  266 + })
  267 + }
  268 +
251 // .opacity(this.isImmerseChannel() ? 0.8 : 1.0) 269 // .opacity(this.isImmerseChannel() ? 0.8 : 1.0)
252 } 270 }
253 .width('40vp') 271 .width('40vp')
@@ -257,11 +275,6 @@ export struct VideoChannelPage { @@ -257,11 +275,6 @@ export struct VideoChannelPage {
257 }) 275 })
258 .alignItems(VerticalAlign.Center) 276 .alignItems(VerticalAlign.Center)
259 .justifyContent(FlexAlign.Center) 277 .justifyContent(FlexAlign.Center)
260 - .onClick(() => {  
261 - TrackingButton.searchClick(TrackConstants.PageName.Search, "VIDEOS")  
262 - let params = { 'tabName': "VIDEOS" } as Record<string, string>  
263 - WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)  
264 - })  
265 .backgroundColor(Color.Transparent) 278 .backgroundColor(Color.Transparent)
266 279
267 } 280 }
@@ -317,6 +330,7 @@ export struct VideoChannelPage { @@ -317,6 +330,7 @@ export struct VideoChannelPage {
317 pageName: item.name + '', 330 pageName: item.name + '',
318 channelId: item.channelId + '', 331 channelId: item.channelId + '',
319 autoRefresh: this.autoRefresh, 332 autoRefresh: this.autoRefresh,
  333 + isRefreshList: this.isRefreshList
320 }) 334 })
321 } else { 335 } else {
322 Column() { 336 Column() {