developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
240037d7 2 parents 9f926b06 7499aa18

Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool into main 

* 'main' of http://192.168.1.42/developOne/harmonyPool:
  fix:长内容渲染
  fix: 18839 UI还原问题-【uat】进入直播，更多按钮粗细和android不一致，看图
  fix: 18692 UI还原问题--【生产环境】直播预告日期字体和ios不一致看图
  fix: 18033 健康频道-时间轴专题_当天的数据不该展示日期
  动态图集优化，图集双击放大
  fix: 16764 收藏列表-稿件封面图未展示，专题样式展示错误。
  fix:web 长内容修复
  fix: 18511 UI还原问题-【uat】地方精选卡，出版方名称超过一行没有省略显示
  fix: 18465 UI还原问题-【uat】顶部广告，滑动效果和android不一致，看视频
Inline Side-by-side
Showing 13 changed files with 431 additions and 107 deletions
... ... @@ -49,16 +49,24 @@ export struct WdWebLocalComponent {
Row() {
RelativeContainer() {
// Web({ src: this.webResource, controller: this.webviewControl, renderMode: RenderMode.SYNC_RENDER })
Web({ src: this.webResource, controller: this.webviewControl })
Web({
src: this.webResource,
controller: this.webviewControl,
renderMode: RenderMode.SYNC_RENDER
})// Web({ src: this.webResource, controller: this.webviewControl })
.domStorageAccess(true)
.databaseAccess(true)
.javaScriptAccess(true)
.imageAccess(true)
.mixedMode(MixedMode.All)
.onlineImageAccess(true)
.enableNativeEmbedMode(true)// .layoutMode(WebLayoutMode.FIT_CONTENT)
// .nestedScroll({ scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST })
// .enableNativeEmbedMode(true)
// .layoutMode(WebLayoutMode.FIT_CONTENT)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.PARENT_FIRST
})
.width('100%')
.height(this.webHeight)
.onPageBegin((event) => {
this.onPageBegin(event?.url);
... ... @@ -241,6 +249,7 @@ export struct WdWebLocalComponent {
Logger.debug(TAG, 'onLoadIntercept return false');
return false
}
onReloadStateChanged() {
Logger.info(TAG, `onReloadStateChanged:::refresh, this.reload: ${this.reload}`);
if (this.reload > 0) {
... ...
import { PhotoListBean } from 'wdBean';
import { Logger } from 'wdKit';
import { image } from '@kit.ImageKit';
import { matrix4, promptAction, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { ScaleModel } from '../model/ScaleModel';
import { OffsetModel } from '../model/OffsetModel';
import { windowSizeManager } from '../utils/Managers';
import { runWithAnimation } from '../utils/FuncUtils';
import { PhotoListBean } from 'wdBean/Index';
import { http } from '@kit.NetworkKit';
const TAG = 'MultiPictureDetailPageComponent';
const TAG = 'MultiPictureDetailItemComponent';
@Reusable
@Component
export struct MultiPictureDetailItemComponent {
@Link isEnableSwipe: boolean; // TODO：需求：多图切换
@State isEnableOffset: boolean = false;
@State imageScaleInfo: ScaleModel = new ScaleModel(1.0, 1.0, 1.5, 0.3);
@State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
@State matrix: matrix4.Matrix4Transit = matrix4.identity().copy();
@State imagePixelMap: image.PixelMap | null = null; // 当前图片pixelMap，用于Image组件显示
@State fitWH: "width" | "height" | undefined = undefined; // 表示当前图片是根据宽度适配还是高度适配
@State imageDefaultSize: image.Size = { width: 0, height: 0 }; // 图片默认大小，即，与屏幕大小最适配的显示大小
imageUri: string = ""; // 当前图片uri
imageWHRatio: number = 0; // 图片原始宽高比
@State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer
private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
//alt app.media.picture_loading 设计稿尺寸
@State imageWidth:string | number = 167
async aboutToAppear() {
// Logger.info(TAG, 'pictures preview'
this.imageUri = this.MultiPictureDetailItem.picPath
this.getPicture()
}
/**
* 通过http的request方法从网络下载图片资源
*/
async getPicture() {
console.info(`cj2024 getPicture`)
http.createHttp()
.request(this.imageUri,
(error: BusinessError, data: http.HttpResponse) => {
if (error) {
// 下载失败时弹窗提示检查网络，不执行后续逻辑
promptAction.showToast({
message: $r('app.string.image_request_fail'),
duration: 2000
})
return;
}
this.transcodePixelMap(data);
// 判断网络获取到的资源是否为ArrayBuffer类型
console.info(`cj2024 getPicture ${data.result}`)
if (data.result instanceof ArrayBuffer) {
console.info(`cj2024 getPicture 222`)
this.imageBuffer = data.result as ArrayBuffer;
}
}
)
}
/**
* 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
* @param data：网络获取到的资源
*/
transcodePixelMap(data: http.HttpResponse) {
console.info(`cj2024 transcodePixelMap ${data.responseCode}`)
if (http.ResponseCode.OK === data.responseCode) {
const imageData: ArrayBuffer = data.result as ArrayBuffer;
// 通过ArrayBuffer创建图片源实例。
const imageSource: image.ImageSource = image.createImageSource(imageData);
this.initCurrentImageInfo(imageSource);
}
}
/**
* 设置当前图片的相关信息：uri、whRatio、pixelMap、fitWH、defaultSize、maxScaleValue
* TODO：知识点：提前获取图片的信息，以进行Image组件的尺寸设置及后续的相关计算
*/
initCurrentImageInfo(imageSource: image.ImageSource): void {
this.matrix = matrix4.identity().copy();
// const imageSource: image.ImageSource = image.createImageSource(this.imageUri);
imageSource.getImageInfo(0).then((data: image.ImageInfo) => {
this.imageWHRatio = data.size.width / data.size.height;
this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());
if (this.imageDefaultSize.width === windowSizeManager.get().width) {
this.fitWH = "width";
} else {
this.fitWH = "height";
}
this.imageScaleInfo.maxScaleValue += this.fitWH === "width" ?
(windowSizeManager.get().height / this.imageDefaultSize.height) :
(windowSizeManager.get().width / this.imageDefaultSize.width);
}).catch((err: BusinessError) => {
console.error(`[error][getImageInfo]${err.message}`);
});
imageSource.createPixelMap().then((data: image.PixelMap) => {
this.imagePixelMap = data;
}).catch((err: BusinessError) => {
console.error(`[error][createPixelMap]${err.message}`);
});
this.isEnableOffset = false;
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
}
/**
* 根据图片宽高比及窗口大小计算图片的默认宽高，即，图片最适配屏幕的大小
* @param imageWHRatio：图片原始宽高比
* @param size：窗口大小{with:number,height:number}
* @returns image.Size
*/
calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {
let width = 0
let height = 0;
width = size.width;
height = size.width / imageWHRatio;
return { width: width, height: height };
}
/**
* TODO：知识点：根据图片大小（宽高<=屏幕宽高）和屏幕大小计算图片放大适配屏幕进行显示的缩放倍率
* @param imageSize：图片当前大小
* @param windowSize：窗口大小
* @returns：缩放倍率
*/
calcFitScaleRatio(imageSize: image.Size, windowSize: window.Size): number {
let ratio: number = 1.0;
if (windowSize.width > imageSize.width) {
ratio = windowSize.width / imageSize.width;
} else {
ratio = windowSize.height / imageSize.height;
}
return ratio;
}
/**
* 在图片消失时，将当前图片的信息设置为默认值
*/
resetCurrentImageInfo(): void {
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().copy();
}
/**
* TODO：需求：在偏移时评估是否到达边界，以便进行位移限制与图片的切换
* @returns：长度为4的boolean数组，表示上下左右是否到达边界
*/
evaluateBound(): boolean[] {
return [false, false, false, false];
}
build() {
Row() {
Image(this.MultiPictureDetailItem.picPath)
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.onComplete(event => {
this.imageWidth = '100%'
})
if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.interpolation(ImageInterpolation.High)
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
.onComplete(event => {
this.imageWidth = '100%'
})
}else{
Image(this.imagePixelMap)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.interpolation(ImageInterpolation.High)
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
.onComplete(event => {
this.imageWidth = '100%'
})
}
}
.onBlur(() => {
this.resetCurrentImageInfo();
})
.height('100%')
.width('100%')
.backgroundColor(Color.Black)
.justifyContent(FlexAlign.Center)
.gesture(
GestureGroup(
GestureMode.Exclusive,
// TODO：知识点：双击切换图片大小
TapGesture({ count: 2 })
.onAction(() => {
let fn: Function;
// 已经是放大状态下，双击缩小
if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.defaultScaleValue) {
fn = () => {
this.isEnableSwipe = true;
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().copy();
};
} else {
// 已经是缩小状态，双击放大
fn = () => {
this.isEnableSwipe = false;
const ratio: number = this.calcFitScaleRatio(this.imageDefaultSize, windowSizeManager.get());
this.imageScaleInfo.scaleValue = ratio;
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().scale({
x: ratio,
y: ratio,
}).copy();
this.imageScaleInfo.stash();
}
}
runWithAnimation(fn);
}),
// 单击切换背景色
// TapGesture({ count: 1 }).onAction(() => {
// runWithAnimation(() => {
// this.bgc = this.bgc === Color.White ? Color.Black : Color.White;
// });
// }),
// TODO：知识点：双指捏合缩放图片
PinchGesture({ fingers: 2, distance: 1 })
.onActionUpdate((event: GestureEvent) => {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.lastValue * event.scale;
// TODO：知识点：缩放时不允许大于最大缩放因子+额外缩放因子，不允许小于默认大小-额外缩放因子，额外缩放因子用于提升用户体验
if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.maxScaleValue *
(1 + this.imageScaleInfo.extraScaleValue)
) {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.maxScaleValue *
(1 + this.imageScaleInfo.extraScaleValue);
}
if (this.imageScaleInfo.scaleValue < this.imageScaleInfo.defaultScaleValue *
(1 - this.imageScaleInfo.extraScaleValue)) {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.defaultScaleValue *
(1 - this.imageScaleInfo.extraScaleValue);
}
// TODO：知识点：matrix默认缩放中心为组件中心
this.matrix = matrix4.identity().scale({
x: this.imageScaleInfo.scaleValue,
y: this.imageScaleInfo.scaleValue,
}).copy();
console.debug(this.imageScaleInfo.toString());
})
.onActionEnd((event: GestureEvent) => {
/**
* TODO：知识点：当小于默认大小时，恢复为默认大小
*/
if (this.imageScaleInfo.scaleValue < this.imageScaleInfo.defaultScaleValue) {
runWithAnimation(() => {
this.imageScaleInfo.reset();
this.imageOffsetInfo.reset();
this.matrix = matrix4.identity().copy();
})
}
// TODO：知识点：当大于最大缩放因子时，恢复到最大
if (this.imageScaleInfo.scaleValue > this.imageScaleInfo.maxScaleValue) {
runWithAnimation(() => {
this.imageScaleInfo.scaleValue = this.imageScaleInfo.maxScaleValue;
this.matrix = matrix4.identity()
.scale({
x: this.imageScaleInfo.maxScaleValue,
y: this.imageScaleInfo.maxScaleValue
});
})
}
this.imageScaleInfo.stash();
}),
// // TODO：知识点：滑动图片
// PanGesture({ fingers: 1 })// TODO：需求：默认大小下左右滑动应当是切换图片
// .onActionUpdate((event: GestureEvent) => {
// if (this.imageScaleInfo.scaleValue === this.imageScaleInfo.defaultScaleValue) {
// // 默认大小下不允许移动
// return;
// }
// this.imageOffsetInfo.currentX = this.imageOffsetInfo.lastX + event.offsetX;
// this.imageOffsetInfo.currentY = this.imageOffsetInfo.lastY + event.offsetY;
// })
// .onActionEnd((event: GestureEvent) => {
// this.imageOffsetInfo.stash();
// })
),
)
}
}
\ No newline at end of file
... ...
... ... @@ -27,11 +27,19 @@ export struct Card9Component {
@State textArr: textItem[] = []
pageShowTime:number = 0;
pageHideTime:number = 0;
@State hideDetail: boolean = false;
onPageShow() {
this.pageShowTime = DateTimeUtils.getTimeStamp()
}
initHideDetail() {
const curRouter = router.getState().name;
if (curRouter === 'MyCollectionListPage') {
this.hideDetail = true;
}
}
//内容浏览Tracking
onPageHide(): void {
this.pageHideTime = DateTimeUtils.getTimeStamp()
... ... @@ -46,6 +54,7 @@ export struct Card9Component {
// this.loadImg = await onlyWifiLoadImg();
const curRouter = router.getState().name;
this.clicked = hasClicked(this.contentDTO.objectId, curRouter)
this.initHideDetail();
}
titleInit() {
... ... @@ -54,6 +63,14 @@ export struct Card9Component {
this.textArr = titleInitRes.textArr;
}
formatTime(timeStamp: number) {
let todayDate = new Date().setHours(0,0,0,0);
let paramsDate = new Date(timeStamp).setHours(0,0,0,0);
let isToday = todayDate === paramsDate
let format: string = isToday ? 'HH:mm' : 'MM月dd日 HH:mm';
return DateTimeUtils.formatDate(timeStamp, format)
}
build() {
Column() {
// 顶部标题，最多两行
... ... @@ -108,14 +125,16 @@ export struct Card9Component {
}.alignContent(Alignment.BottomStart)
// 时间线--后端返回三个，
Column() {
ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
this.timelineItem(item, index, index === this.contentDTO.slideShows.length - 1)
})
if (!this.hideDetail) {
Column() {
ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
this.timelineItem(item, index, index === this.contentDTO.slideShows.length - 1)
})
}
}
// 底部-查看更多。根据接口返回的isMore判断是否显示查看更多
if (this.contentDTO.hasMore == 1) {
if (this.contentDTO.hasMore == 1 && !this.hideDetail) {
Row() {
Text("查看更多")
.fontSize($r("app.float.font_size_14"))
... ... @@ -197,7 +216,7 @@ export struct Card9Component {
.margin({ right: 5 })
.fillColor(item.newsTitleColor)
Text(DateTimeUtils.formatDate(item.publishTime, "MM月dd日 HH:mm"))
Text(this.formatTime(item.publishTime))
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
... ...
... ... @@ -292,6 +292,10 @@ struct indicatorAnimations {
// Image($r('app.media.swiper_indicator_gray'))
// .width('100%')
// .height(2)
Image($r('app.media.swiper_indicator_gray'))
.width('100%')
.height(2)
Image($r('app.media.swiper_indicator_white'))
.width(this.leftW)
.height(2)
... ... @@ -323,6 +327,9 @@ struct indicatorAnimations {
// Image($r('app.media.swiper_indicator_gray'))
// .width('100%')
// .height(2)
Image($r('app.media.swiper_indicator_gray'))
.width('100%')
.height(2)
Image($r('app.media.swiper_indicator_white'))
.width(this.rightW)
.height(2)
... ...
... ... @@ -45,7 +45,7 @@ export struct ZhGridLayout02NewsContent {
buildItemCard(item: ContentDTO, index: number) {
Column() {
Stack({ alignContent: Alignment.BottomEnd }) {
Image(this.loadImg ? item == undefined ? '' : item.fullColumnImgUrls[0].url : '')
Image(this.loadImg ? item == undefined ? '' : item.fullColumnImgUrls?.[0]?.url : '')
.backgroundColor(0xf5f5f5)
.width('100%')
// .height(95)
... ...
... ... @@ -19,8 +19,8 @@ export struct ZhSingleRow02 {
@State pageId: string = '';
@State pageName: string = '';
@State compDTO: CompDTO = {} as CompDTO
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State initMoreWidth: number = 22;
@State moreWidth:number = 22
@State moreTips: string = ''
scroller: Scroller = new Scroller()
... ... @@ -53,7 +53,7 @@ export struct ZhSingleRow02 {
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = 16
this.moreWidth = 22
}
this.resetMoreTips()
}
... ...
... ... @@ -43,8 +43,8 @@ export struct ZhSingleRow03 {
// @State reserveStatus: reserveItem[] = []
@State reservedIds: string[] = [];
@State loadImg: boolean = false;
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State initMoreWidth: number = 22;
@State moreWidth:number = 22
@State moreTips: string = ''
scroller: Scroller = new Scroller()
... ... @@ -78,7 +78,7 @@ export struct ZhSingleRow03 {
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = 16
this.moreWidth = 22
}
this.resetMoreTips()
}
... ... @@ -260,7 +260,7 @@ export struct ZhSingleRow03 {
.fontSize(12)
.textAlign(TextAlign.Start)
.fontFamily('PingFang SC-Semibold')
.fontWeight(600)
.fontWeight(500)
Image($r('app.media.timeline_rect'))
.width(4)
.height(3)
... ... @@ -270,7 +270,7 @@ export struct ZhSingleRow03 {
.fontColor(0x000000)
.fontSize(12)
.fontFamily('PingFang SC-Semibold')
.fontWeight(600)
.fontWeight(500)
Text('开始直播')
.fontColor(0xC8C8C8)
.fontSize(12)
... ...
... ... @@ -110,6 +110,7 @@ struct localCard {
.margin({ bottom: 6 })
.flexShrink(0)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Text(this.operDataListItem.newsTitle)
.width(CommonConstants.FULL_PARENT)
... ...
... ... @@ -9,8 +9,8 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
@State compDTO: CompDTO = {} as CompDTO
@State pageId: string = '';
@State pageName: string = '';
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State initMoreWidth: number = 22;
@State moreWidth:number = 22
@State moreTips: string = ''
scroller: Scroller = new Scroller()
... ... @@ -44,7 +44,7 @@ export struct HorizontalStrokeCardThreeTwoRadioForMoreComponent {
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = 16
this.moreWidth = 22
}
this.resetMoreTips()
}
... ...
... ... @@ -25,6 +25,9 @@ export struct ImageItemView {
imageWHRatio: number = 0; // 图片原始宽高比
private MultiPictureDetailItem: PhotoListBean = {} as PhotoListBean
@State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer
//alt app.media.picture_loading 设计稿尺寸
@State imageWidth:string | number = 167
private scroller: Scroller = new Scroller()
aboutToAppear(): void {
this.imageUri = this.MultiPictureDetailItem.picPath
... ... @@ -81,14 +84,8 @@ export struct ImageItemView {
calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {
let width = 0
let height = 0;
if (imageWHRatio > size.width / size.height) {
// 图片宽高比大于屏幕宽高比，图片默认以屏幕宽度进行显示
width = size.width;
height = size.width / imageWHRatio;
} else {
height = size.height;
width = size.height * imageWHRatio;
}
width = size.width;
height = size.width / imageWHRatio;
return { width: width, height: height };
}
... ... @@ -117,7 +114,12 @@ export struct ImageItemView {
// const imageSource: image.ImageSource = image.createImageSource(this.imageUri);
imageSource.getImageInfo(0).then((data: image.ImageInfo) => {
this.imageWHRatio = data.size.width / data.size.height;
console.error(`this.imageDefaultSize this.imageWHRatio = ${this.imageWHRatio}`);
console.error(`this.imageDefaultSize width = ${data.size.width}`);
console.error(`this.imageDefaultSize height = ${data.size.height}`);
this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());
console.error(`this.imageDefaultSize = ${JSON.stringify(windowSizeManager.get())}`);
console.error(`this.imageDefaultSize = ${JSON.stringify(this.imageDefaultSize)}`);
if (this.imageDefaultSize.width === windowSizeManager.get().width) {
this.fitWH = "width";
} else {
... ... @@ -158,47 +160,57 @@ export struct ImageItemView {
build() {
Stack() {
if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.width(this.fitWH === "width" ? "100%" : undefined)
.height(this.fitWH === "height" ? "100%" : undefined)
.aspectRatio(this.imageWHRatio)
.objectFit(ImageFit.Cover)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
}else{
Image(this.imagePixelMap)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.width(this.fitWH === "width" ? "100%" : undefined)
.height(this.fitWH === "height" ? "100%" : undefined)
.aspectRatio(this.imageWHRatio)
.objectFit(ImageFit.Cover)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
Scroll(this.scroller) {
if(this.imageUri != null && (this.imageUri.includes('.gif') || this.imageUri.includes('.GIF'))){
Image(this.imageUri)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.interpolation(ImageInterpolation.High)
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
.onComplete(event => {
this.imageWidth = '100%'
})
} else {
Image(this.imagePixelMap)// TODO：知识点：宽高只根据其尺寸设置一个，通过保持宽高比来设置另一个属性
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.objectFit(ImageFit.Auto)// TODO：知识点：保持宽高比进行缩放，可以超出父组件，以便实现多图切换的增强功能
.interpolation(ImageInterpolation.High)
.autoResize(false)
.transform(this.matrix)// TODO：知识点：通过matrix控制图片的缩放
.defaultFocus(true)
.offset({
// TODO：知识点：通过offset控制图片的偏移
x: this.imageOffsetInfo.currentX,
y: this.imageOffsetInfo.currentY
})
.onComplete(event => {
this.imageWidth = '100%'
})
}
}
.scrollable(ScrollDirection.Vertical)
.scrollBarWidth(0)
.constraintSize({
maxHeight: this.imageDefaultSize.height
})
}
.onBlur(() => {
this.resetCurrentImageInfo();
})
// .backgroundColor(this.bgc)
.alignContent(Alignment.Center)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.width("100%")
.height("100%")
.backgroundColor(Color.Black)
.gesture(
GestureGroup(
GestureMode.Exclusive,
... ...
... ... @@ -18,8 +18,8 @@ export struct LiveHorizontalCardComponent {
@State pageName: string = '';
@State compDTO: CompDTO = {} as CompDTO
@State loadImg: boolean = false;
@State initMoreWidth: number = 16;
@State moreWidth:number = 16
@State initMoreWidth: number = 22;
@State moreWidth:number = 22
@State moreTips: string = ''
scroller: Scroller = new Scroller()
... ... @@ -53,7 +53,7 @@ export struct LiveHorizontalCardComponent {
resetEdgeAnimation() {
if (this.moreWidth > this.initMoreWidth) {
this.moreWidth = 16
this.moreWidth = 22
}
this.resetMoreTips()
}
... ...
... ... @@ -3,6 +3,7 @@ import { display, router } from '@kit.ArkUI';
import { ImageItemView } from '../components/view/ImageItemView';
import { ImageDownloadComponent } from '../components/ImageDownloadComponent';
import { Action } from 'wdBean';
import { WindowModel } from 'wdKit/Index';
const TAG = 'MultiPictureListPage';
... ... @@ -36,22 +37,37 @@ export struct MultiPictureListPage {
this.currentUrl = this.photoList[this.swiperIndex]?.picPath
}
onPageShow(): void {
console.log(TAG, 'onPageShow')
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
}
onPageHide(): void {
console.log(TAG, 'onPageHide')
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000'})
}
build() {
RelativeContainer() {
Image($r('app.media.icon_arrow_left_white'))
.width(24)
.height(24)
.aspectRatio(1)
.interpolation(ImageInterpolation.High)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.onClick(() => {
this.onBack();
router.back();
})
.id("backImg")
Row(){
Image($r('app.media.icon_arrow_left_white'))
.width(24)
.height(24)
.aspectRatio(1)
.interpolation(ImageInterpolation.High)
}
.zIndex(10)
.margin({ top: `${this.topSafeHeight}px` })
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.onClick(() => {
this.onBack();
router.back();
})
.id("backImg")
if (this.photoList && this.photoList?.length > 0) {
Swiper(this.swiperController) {
... ... @@ -61,7 +77,7 @@ export struct MultiPictureListPage {
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.height('100%')
.vertical(false)
.autoPlay(false)
.loop(false)
... ... @@ -83,8 +99,8 @@ export struct MultiPictureListPage {
Scroll(this.scroller) {
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Start
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
... ... @@ -97,7 +113,9 @@ export struct MultiPictureListPage {
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}.fontColor(Color.White).margin(4)
}
.fontColor(Color.White)
.margin(4)
}
}
.width('100%')
... ... @@ -133,8 +151,6 @@ export struct MultiPictureListPage {
}
.width('100%')
.height('100%')
.padding({top: `${this.topSafeHeight}px`,bottom:`${this.bottomSafeHeight}px`})
.backgroundColor(Color.Black)
.id('e_picture_container')
}
... ...
... ... @@ -36,9 +36,6 @@ export struct MultiPictureDetailPageComponent {
private contentId: string = ''
private relType: string = ''
private displayTool = display.getDefaultDisplaySync()
private screenWidth: number = 0
private picWidth: number = 0
@State picHeight: number = 0
@State titleHeight: number = 0
@State index: number = 0
@State currentIndex: number = 0
... ... @@ -65,6 +62,7 @@ export struct MultiPictureDetailPageComponent {
pageParam: ParamType = {}
followUserId: string = ''
followUserName: string = ''
@State isEnableSwipe: boolean = true;
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -76,11 +74,7 @@ export struct MultiPictureDetailPageComponent {
async aboutToAppear() {
//获取宽高尺寸
this.screenWidth = this.displayTool.width
// this.picWidth = this.screenWidth - vp2px(52)
this.picWidth = this.screenWidth
this.picHeight = this.picWidth * 578 / 375
this.titleHeight = this.screenWidth * 178 / 375
this.titleHeight = this.displayTool.width * 178 / 375
//注册字体
// font.registerFont({
// familyName: 'BebasNeueBold',
... ... @@ -306,7 +300,7 @@ export struct MultiPictureDetailPageComponent {
Swiper(this.swiperController) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
Swiper(this.swiperControllerItem) {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item, isEnableSwipe: this.isEnableSwipe })
}
.width('100%')
.height('100%')
... ...