xingzhaojie

comp:Carousel_Layout_01 desc:轮播图卡卡片开发,数据对接

... ... @@ -41,7 +41,7 @@
"heatValue": "",
"innerUrl": "",
"landscape": 1,
"lengthTime": null,
"lengthTime": "03:02",
"linkUrl": "",
"openLikes": 0,
"openUrl": "http://livewatch-prod.aikan.pdnews.cn/tr_lud/5404912f99bf4703ab070752b507cc64_origin.m3u8?auth_key=1705628416-0-0-c7f5854d6cbe801578009bfa44757f0d",
... ...
... ... @@ -14,3 +14,5 @@ export { BottomNavigationComponent } from "./components/BottomNavigationComponen
export { TopNavigationComponent } from "./components/TopNavigationComponent"
export { LabelComponent } from "./components/LabelComponent"
export { BannerComponent } from "./components/BannerComponent"
\ No newline at end of file
... ...
/**
* BannerComponent
* 轮播图卡/单图
* 邢照杰
*/
import { CommonConstants } from 'wdConstant';
import colorSpaceManager from '@ohos.graphics.colorSpaceManager';
import { CompDTO } from '../repository/bean/CompDTO';
import { CompUtils } from '../utils/CompUtils';
import { ContentDTO } from '../repository/bean/ContentDTO';
const TAG = 'BannerComponent';
let timerIds: number[] = [];
/**
* 轮播卡(暂时仅展示主标题,不展示子标题)
* comp类型
* 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
*/
@Entry
@Component
export struct BannerComponent {
@State compDTO: CompDTO = {} as CompDTO
@State index: number = 0;
private bannerContent:ContentDTO;
private swiperController: SwiperController = new SwiperController();
aboutToAppear() {
// Data Initialization.
this.bannerContent = this.compDTO.operDataList[0];
// Turn on scheduled task.
if (this.compDTO.operDataList.length > 1) {
startPlay(this.swiperController);
}
}
aboutToDisappear() {
stopPlay();
}
build() {
// 整体父视图
Column() {
// 判断数组元素个数
if (this.compDTO.operDataList.length > 1) {
// 滚动banner
Swiper(this.swiperController) {
ForEach(this.compDTO.operDataList, item => {
Stack() {
// 背景图
Image(item.coverUrl)
.objectFit(ImageFit.Fill)
.borderRadius(5)
// 底部标题和时间
Column() {
Text(item.description)
.fontSize(18)
.margin({ bottom: 4 })
.fontColor(Color.White)
.fontWeight(600)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.padding({ left: 10, right: 5 })
.width('100%')
.textAlign(TextAlign.Start)
if (item.lengthTime) {
Row() {
Image($r('app.media.videoTypeIcon'))
.height(20)
.width(20)
// .margin({right:3})
Text(item.lengthTime)
.padding({ left: 5, right: 5 })
.fontColor(Color.White)
}
.backgroundColor('#333333')
.height(20)
.margin({ right: 5, bottom: 3 })
.alignSelf(ItemAlign.End)
.borderRadius(2)
}
}
.height('50')
.width('100%')
}
.alignContent(Alignment.BottomStart)
}, item => JSON.stringify(item))
}
.width('100%')
.height('100%')
.index(this.index)
.indicatorStyle({
selectedColor: Color.White,
color: Color.Gray,
size: 18,
left: 15
})
.indicator(true)
.duration(500)
} else {
// 不滚动banner
Stack() {
// 背景图
Image(this.bannerContent.coverUrl.toString())
.objectFit(ImageFit.Fill)
.borderRadius(5)
// 底部标题和时间
Row() {
// 标题
Text(this.bannerContent.description.toString())
.fontSize(18)
.fontColor(Color.White)
.fontWeight(600)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.padding({ left: 10, right: 0 ,bottom: 5 })
.width('80%')
// 时间
if (this.bannerContent.lengthTime) {
Row() {
Image($r('app.media.videoTypeIcon'))
.height(20)
.width(20)
// .margin({right:3})
Text(this.bannerContent.lengthTime.toString())
.padding({ left: 5, right: 5 })
.fontColor(Color.White)
}
.backgroundColor('#333333')
.height(20)
.borderRadius(2)
.margin({ bottom: 6 })
}
}
.width('100%')
.height('100%')
.alignItems(VerticalAlign.Bottom)
}
.alignContent(Alignment.BottomStart)
.width('100%')
.height('100%')
}
}
.width('100%')
.aspectRatio(1.7)
.padding({left:10,right:15,top:10,bottom:10})
}
}
/**
* start scheduled task.
*
* @param swiperController Controller.
*/
export function startPlay(swiperController: SwiperController) {
let timerId = setInterval(() => {
swiperController.showNext();
}, 3000);
timerIds.push(timerId);
}
/**
* stop scheduled task.
*/
export function stopPlay() {
timerIds.forEach((item) => {
clearTimeout(item);
})
}
\ No newline at end of file
... ...
... ... @@ -6,6 +6,13 @@ import { EmptyComponent } from './EmptyComponent';
import { ErrorComponent } from './ErrorComponent';
import { LabelComponent } from './LabelComponent';
import { LoadingComponent } from './LoadingComponent';
import {BannerComponent} from './BannerComponent'
const TAG = 'PageComponent';
... ... @@ -42,6 +49,8 @@ export struct PageComponent {
componentBuilder(compDTO: CompDTO, compIndex: number) {
if (compDTO.compStyle === CompStyle.Label_03) {
LabelComponent({ compDTO: compDTO })
}else if(compDTO.compStyle === CompStyle.Carousel_Layout_01) {
BannerComponent({ compDTO: compDTO })
} else {
// todo:组件未实现 / Component Not Implemented
Text(compDTO.compStyle)
... ...
... ... @@ -10,7 +10,7 @@ export interface ContentDTO {
heatValue: string;
innerUrl: string;
landscape: number;
// lengthTime?: any;
lengthTime?: any;
linkUrl: string;
openLikes: number;
openUrl: string;
... ...
{
"src": [
"pages/Index",
"pages/MainPage"
]
}
\ No newline at end of file
... ...