王士厅

多图详情页swiper ,tabBar 开发

... ... @@ -11,7 +11,7 @@ import { UserInfoDTO } from './UserInfoDTO'
* http://192.168.1.3:3300/project/3802/interface/api/200915
*/
export interface ContentDetailDTO {
newsId: string;
newsId: number;
newsTitle: string;
newsShortTitle: string;
newsDownTitle: string;
... ... @@ -42,8 +42,8 @@ export interface ContentDetailDTO {
videoInfo: VideoInfoDTO[];
liveInfo?: any;
voteInfo?: any;
rmhInfo?: RmhInfoDTO;
userInfo?: UserInfoDTO;
rmhInfo?: RmhInfoDTO | null;
userInfo?: UserInfoDTO | null;
openLikes: number;
openComment: number;
likesStyle: number;
... ... @@ -68,4 +68,7 @@ export interface ContentDetailDTO {
timeline?: any;
traceInfo: string;
viewCount: number;
isNewspaper: boolean;
oldNewsId: string;
serials: any;
}
\ No newline at end of file
... ...
... ... @@ -2,7 +2,7 @@ export interface FullColumnImgUrlDTO {
format?: any;
height: number;
landscape: number;
size: number;
size: number | null;
url: string;
weight: number;
}
... ...
... ... @@ -9,12 +9,10 @@ export struct MultiPictureDetailItemComponent {
Stack() {
Image(this.MultiPictureDetailItem.picPath)
.width('100%')
.aspectRatio(378 / 566)
.aspectRatio(this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height)
.objectFit(ImageFit.Fill)
}
.padding({ top: 16, right: 16, bottom: 16, left: 16 })
.margin({ left: 10, right: 10 })
.backgroundColor(Color.White)
.backgroundColor(Color.Black)
.width('100%')
}
}
\ No newline at end of file
... ...
... ... @@ -8,6 +8,7 @@ import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemCompone
const TAG = 'MultiPictureDetailPageComponent';
@Preview
@Component
export struct MultiPictureDetailPageComponent {
private displayTool = display.getDefaultDisplaySync()
... ... @@ -17,7 +18,7 @@ export struct MultiPictureDetailPageComponent {
@State relId: string = '500005189942'
@State contentId: string = '30043715146'
@State relType: string = '1'
@State contentDetailData: ContentDetailDTO[] = [{}] as ContentDetailDTO[]
@State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]
@Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
private swiperController: SwiperController = new SwiperController()
@State swiperIndex: number = 0;
... ... @@ -50,8 +51,7 @@ export struct MultiPictureDetailPageComponent {
build() {
RelativeContainer() {
RelativeContainer() {
if (this.contentDetailData?.[0].photoList?.length > 0) {
if (this.contentDetailData && this.contentDetailData.length > 0 && this.contentDetailData[0].photoList && this.contentDetailData[0].photoList?.length > 0) {
Swiper(this.swiperController) {
ForEach(this.contentDetailData[0].photoList, (item: PhotoListBean, index: number) => {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
... ... @@ -60,37 +60,33 @@ export struct MultiPictureDetailPageComponent {
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(true)
.vertical(false)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.displayCount(1)
.margin({ top: 35, left: 10, right: 10 })
.id('e_picture_content')
.id('e_swiper_content')
.alignRules({
top: { anchor: "e_picture_container", align: VerticalAlign.Bottom },
top: { anchor: "__container__", align: VerticalAlign.Top },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.onChange((index: number) => {
this.swiperIndex = index
})
}
}
RelativeContainer() {
OperRowListView()
.alignRules({
top: { anchor: "e_picture_container", align: VerticalAlign.Bottom },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
.width('100%')
.height(100)
.margin({ left: 20 })
.border({ width: 2, color: '#6699FF' })
.height(56)
.border({ width: {top: 0.5}, color: '#FFFFFF' })
.id('e_oper_row')
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.color_80000000'))
.backgroundColor(Color.Black)
.id('e_picture_container')
}
... ...
... ... @@ -2,17 +2,12 @@ import { ToastUtils, Logger } from 'wdKit';
export interface OperationItem {
icon: Resource;
// icon_selected: Resource;
text: string | Resource;
num?: number; // 个数
}
const FULL_PARENT: string = '100%';
const TAG = 'OperRowListView';
@Entry
@Component
export struct OperRowListView {
@State operationList: OperationItem[] = [
... ... @@ -41,32 +36,16 @@ export struct OperRowListView {
}
build() {
// List({ space: 0, initialIndex: 0 }) {
// ForEach(this.operationList, (item: OperationItem, index: number) => {
// ListItem() {
// this.buildOperationItem(item, index)
// }
// }, (item: OperationItem, index: number) => JSON.stringify(item))
// }
// .width(48)
// .height(250)
// // .margin({ bottom: 100 })
// .backgroundColor(Color.Red)
// // .listDirection(Axis.Vertical) // 默认值:Axis.Vertical
// // .lanes(this.buildLanes()) // 行/列数,一列 // 默认值:1
// .cachedCount(2)
// .scrollBar(BarState.Off)
// .nestedScroll({
// scrollForward: NestedScrollMode.PARENT_FIRST,
// scrollBackward: NestedScrollMode.SELF_FIRST
// })
Column() {
Row() {
ForEach(this.operationList, (item: OperationItem, index: number) => {
this.buildOperationItem(item, index)
}, (item: OperationItem, index: number) => JSON.stringify(item))
}
.width(48)
.width('100%')
.height('100%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
/**
... ... @@ -78,21 +57,11 @@ export struct OperRowListView {
buildOperationItem(item: OperationItem, index: number) {
Column() {
Image(item.icon)
.width('100%')
.width(24)
.height(24)
.aspectRatio(1)
// .borderRadius(6)
Text(item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.margin(5)
// .backgroundColor(Color.Black)
.alignItems(HorizontalAlign.Center)
.hoverEffect(HoverEffect.Scale)
.onClick((event: ClickEvent) => {
... ...
... ... @@ -5,7 +5,7 @@ import {
CompInfoBean,
ContentDetailDTO,
InteractDataDTO,
InteractDataStatusDTO,
InteractDataStatusBean,
MorningEveningPaperDTO,
NavigationBodyDTO,
NewspaperListBean,
... ... @@ -172,7 +172,7 @@ export class PageRepository {
static fetchInteractDataStatus(param: object) {
let url = PageRepository.getInteractDataStatusUrl()
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return WDHttp.post<ResponseDTO<InteractDataStatusDTO[]>>(url, param, headers)
return WDHttp.post<ResponseDTO<InteractDataStatusBean[]>>(url, param, headers)
};
// 浏览历史新增、删除接口
... ...
... ... @@ -33,8 +33,8 @@ export struct DetailPlayShortVideoPage {
@Provide newsSourceName?: string = ''
@Provide newsTitle?: string = ''
@Provide editorName?: string = ''
@Provide rmhInfo?: RmhInfoDTO = undefined
@Provide userInfo?: UserInfoDTO = undefined
@Provide rmhInfo?: RmhInfoDTO | null = null
@Provide userInfo?: UserInfoDTO | null = null
@Provide message?: string = ''
@Provide newsSummary?: string = ''
@Provide progressVal: number = 0;
... ...
... ... @@ -15,8 +15,8 @@ export class PlayViewModel {
newsTitle?: string
editorName?: string
newsSummary?: string
rmhInfo?: RmhInfoDTO
userInfo?: UserInfoDTO
rmhInfo?: RmhInfoDTO | null
userInfo?: UserInfoDTO | null
url?: string
// 视频朝向,
// 横屏视频:1(进入竖屏,立即展示半屏播放窗口,当切换横屏时,再展示全部播放窗口;后续可再转换到竖屏):
... ...