Toggle navigation
Toggle navigation
This project
Loading...
Sign in
developOne
/
harmonyPool
Go to a project
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation pinning
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Authored by
guochunsong
2024-02-02 17:57:52 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7f5adc6c15622f14de54e0bab95498d59bb71314
7f5adc6c
1 parent
5711d2bc
适配barner提交
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
68 additions
and
172 deletions
sight_harmony/wdComponent/src/main/ets/components/page/CardView.ets
sight_harmony/wdComponent/src/main/ets/components/view/BannerComponent.ets
sight_harmony/wdComponent/src/main/ets/components/page/CardView.ets
View file @
7f5adc6
...
...
@@ -20,7 +20,7 @@ export struct CarouselLayout01CardView {
build() {
RelativeContainer() {
Image(this.item.
hImage
Url)
Image(this.item.
cover
Url)
.width(CommonConstants.FULL_PARENT)
.height(CommonConstants.FULL_PARENT)
.objectFit(ImageFit.Cover)
...
...
sight_harmony/wdComponent/src/main/ets/components/view/BannerComponent.ets
View file @
7f5adc6
/**
* BannerComponent
* 轮播图卡/单图
* 邢照杰
*/
import { CommonConstants } from 'wdConstant';
import colorSpaceManager from '@ohos.graphics.colorSpaceManager';
import { CompUtils } from '../../utils/CompUtils';
import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
import { CompDTO, ContentDTO, } from 'wdBean';
import { BreakpointConstants,DurationEnum } from 'wdConstant';
import { BreakPointType, Logger } from 'wdKit';
import { CarouselLayout01CardView } from '../page/CardView';
import { EmptyComponent } from './EmptyComponent';
const TAG = 'BannerComponent';
let timerIds: number[] = [];
/**
* 轮播卡(暂时仅展示主标题,不展示子标题)
* comp类型
* 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
* 轮播组件,即Banner/轮播大图/焦点图/自动滑动
* 样式:
* 'Carousel_Layout-01', // 通用轮播卡:视频、直播、活动、专题、榜单、外链
*/
@Entry
@Component
export struct BannerComponent {
@StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
@State compDTO: CompDTO = {} as CompDTO
@State index: number = 0;
private bannerContent: ContentDTO = {} as ContentDTO;
private swiperController: SwiperController = new SwiperController();
aboutToAppear() {
watchCurrentBreakpoint() {
Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
}
// Data Initialization.
this.bannerContent = this.compDTO.operDataList[0];
// Turn on scheduled task.
if (this.compDTO.operDataList.length > 1) {
startPlay(this.swiperController);
}
aboutToAppear() {
Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
}
aboutToDisappear() {
stopPlay(
);
Logger.info(TAG, 'aboutToDisappear'
);
}
build() {
// 整体父视图
Column() {
// 判断数组元素个数
if (this.compDTO.operDataList.length > 1) {
// 滚动banner
Swiper(this.swiperController) {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
Stack() {
// 背景图
Image(item.coverUrl)
.objectFit(ImageFit.Fill)
.borderRadius(5)
onPageShow() {
Logger.info(TAG, 'onPageShow');
}
// 底部标题和时间
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)
.onClick((event: ClickEvent) => {
Logger.info(TAG, `BannerComponent onClick event index: ${this.index}`);
// let taskAction: Action = {
// type: 'JUMP_H5_BY_WEB_VIEW',
// params: {
// url: ConfigConstants.DETAIL_URL
// } as Params,
// };
// WDRouterRule.jumpWithAction(taskAction)
onPageHide() {
Logger.info(TAG, 'onPageHide');
}
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 7, // 沉浸式竖屏详情页
contentID: '863556812'
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
})
}, (item: ContentDTO, index: number) => 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)
onBackPress() {
Logger.info(TAG, 'onBackPress');
}
// 底部标题和时间
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%')
build() {
if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
Swiper() {
ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
this.buildItemBanner01(item, index)
})
}
.margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
.padding({ bottom: 14 })
.displayCount(this.buildDisplayCount()) // 仅展示1个图片
.cachedCount(2)
.index(1) // The default index of Swiper.
.autoPlay(true)
.interval(DurationEnum.DURATION_4)
.indicator(Indicator.dot()
.right(5)
.itemWidth(4)
.itemHeight(4)
.selectedItemWidth(10)
.selectedItemHeight(6))
.loop(true)
.duration(DurationEnum.DURATION_4)
.vertical(false)
.curve(Curve.Linear)
.onChange((index: number) => {
Logger.info(TAG, `Swiper onChange index : ${index}`);
})
} else {
EmptyComponent({ emptyHeight: 200 })
}
.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);
}
public buildDisplayCount(): number {
return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
}
/**
* stop scheduled task.
*/
export function stopPlay() {
timerIds.forEach((item) => {
clearTimeout(item);
})
/**
* 组件项
*
* @param programmeBean item 组件项
*/
@Builder
buildItemBanner01(item: ContentDTO, index: number) {
CarouselLayout01CardView({
item: item,
index: index
})
}
}
\ No newline at end of file
...
...
Please
register
or
login
to post a comment