王士厅

fix: 人民号动态图片上下滑动未能返回上一级

... ... @@ -7,6 +7,7 @@ import { windowSizeManager } from '../utils/Managers';
import { runWithAnimation } from '../utils/FuncUtils';
import { PhotoListBean } from 'wdBean/Index';
import { http } from '@kit.NetworkKit';
import { router } from '@kit.ArkUI';
const TAG = 'MultiPictureDetailItemComponent';
... ... @@ -27,12 +28,15 @@ export struct MultiPictureDetailItemComponent {
private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
//alt app.media.picture_loading 设计稿尺寸
@State imageWidth:string | number = 167
private scroller: Scroller = new Scroller()
private swiperControllerItem: SwiperController = new SwiperController()
@State currentOffset: number = 0
@Consume duration: number
async aboutToAppear() {
this.imageUri = this.MultiPictureDetailItem.picPath
this.getPicture()
console.log(TAG, JSON.stringify(this.MultiPictureDetailItem))
}
/**
... ... @@ -179,8 +183,10 @@ export struct MultiPictureDetailItemComponent {
}
build() {
Row() {
Scroll(this.scroller) {
Swiper(this.swiperControllerItem){
Row(){ // 居中显示
List(){
ListItem(){
if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
Image(this.imageUri)// TODO:知识点:宽高只根据其尺寸设置一个,通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
... ... @@ -194,11 +200,12 @@ export struct MultiPictureDetailItemComponent {
// TODO:知识点:通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
.onComplete(event => {
this.imageWidth = '100%'
})
}else{
} else {
Image(this.imagePixelMap || 'app.media.datail_imageLoading_w')// TODO:知识点:宽高只根据其尺寸设置一个,通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
... ... @@ -217,16 +224,38 @@ export struct MultiPictureDetailItemComponent {
})
}
}
.scrollable(ScrollDirection.Vertical)
}
.alignListItem(ListItemAlign.Center)
.scrollBarWidth(0)
// .height(this.imageDefaultSize.height || "100%")
}
.justifyContent(FlexAlign.Center)
}
.height('100%')
.vertical(true)
.autoPlay(false)
.cachedCount(1)
.indicator(false)
.displayCount(1)
.loop(false)
.zIndex(10)
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
this.currentOffset = Math.abs(extraInfo.currentOffset)
})
.onTouch((event: TouchEvent) => {
if (this.duration === 0) {
this.duration = 500
}
if (event.type === 1) {
// if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
if (this.currentOffset > 160) {
router.back()
}
}
})
.onBlur(() => {
this.resetCurrentImageInfo();
})
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.gesture(
GestureGroup(
GestureMode.Exclusive,
... ... @@ -326,5 +355,6 @@ export struct MultiPictureDetailItemComponent {
// })
),
)
// .height(this.imageDefaultSize.height || "100%")
}
}
\ No newline at end of file
... ...
... ... @@ -24,6 +24,7 @@ export struct MultiPictureListPage {
@Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
// @Provide bgc: Color = Color.White;
@Provide duration: number = 0
aboutToAppear(): void {
//获取宽高尺寸
... ...
import { NetworkUtil, Logger, NetworkType, SPHelper, WindowModel, StringUtils } from 'wdKit';
import { NetworkUtil, Logger, SPHelper, StringUtils } from 'wdKit';
import { ResponseDTO } from 'wdNetwork';
import {
ContentDetailDTO,
... ... @@ -9,11 +9,9 @@ import {
Params,
InteractDataDTO
} from 'wdBean';
import display from '@ohos.display';
import { DateTimeUtils } from 'wdKit/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index';
import { router } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { CommentDialogView } from 'wdDetailPlayShortVideo/Index';
import { EmptyComponent,
... ... @@ -44,7 +42,6 @@ export struct MultiPictureDetailPageComponent {
@Consume topSafeHeight: number
@Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
private swiperController: SwiperController = new SwiperController()
private swiperControllerItem: SwiperController = new SwiperController()
@State swiperIndex: number = 0;
@Provide followStatus: string | undefined = '0' // 关注状态
@Provide showCommentList: boolean = false
... ... @@ -56,14 +53,13 @@ export struct MultiPictureDetailPageComponent {
@State showDownload: Boolean = false // 控制是否显示下载默认隐藏
@State publishCommentModel: publishCommentModel = new publishCommentModel()
@State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
@State currentOffset: number = 0
@State duration: number = 0
@Provide interactData: InteractDataDTO = {} as InteractDataDTO
pageParam: ParamType = {}
followUserId: string = ''
followUserName: string = ''
@State isEnableSwipe: boolean = true;
@State isScrollerTop: boolean = false;
@Provide duration: number = 0
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -300,32 +296,9 @@ export struct MultiPictureDetailPageComponent {
imgSwiper() {
Swiper(this.swiperController) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
Swiper(this.swiperControllerItem) {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe })
}
.width('100%')
.height('100%')
.vertical(true)
.autoPlay(false)
.cachedCount(1)
.indicator(false)
.displayCount(1)
.loop(false)
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("onGestureSwipe current offset: " + extraInfo.currentOffset)
this.currentOffset = Math.abs(extraInfo.currentOffset)
})
.onTouch((event: TouchEvent) => {
if (this.duration === 0) {
this.duration = 500
}
if (event.type === 1) {
// if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
if (this.currentOffset > 160) {
router.back()
}
}
})
MultiPictureDetailItemComponent(
{ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe }
)
})
}
.index(this.swiperIndex)
... ... @@ -425,9 +398,9 @@ export struct MultiPictureDetailPageComponent {
Scroll(this.scroller) {
Column() {
Row()
/*Row()
.width("100%")
.height(this.contentDetailData.photoList?.[this.swiperIndex].picDesc ? 90 : 130)
.height(this.contentDetailData.photoList?.[this.swiperIndex].picDesc ? 90 : 130)*/
Flex({
direction: FlexDirection.Column
}) {
... ... @@ -451,7 +424,10 @@ export struct MultiPictureDetailPageComponent {
})
}
}
.height(230)
.constraintSize({
maxHeight: 230
})
// .height(230)
.edgeEffect(EdgeEffect.None)
.scrollBarWidth(0)
.scrollBar(BarState.Off)
... ...