douaojie

fix: 电子报骨架图,轮播图添加标签

import { CompDTO, ContentDTO, } from 'wdBean';
import { BreakpointConstants, CommonConstants, DurationEnum } from 'wdConstant';
import { BreakpointConstants, CommonConstants } from 'wdConstant';
import { BreakPointType, Logger } from 'wdKit';
import { CompUtils } from '../../utils/CompUtils';
import { ProcessUtils } from 'wdRouter';
import { EmptyComponent } from '../view/EmptyComponent';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { Notes } from '../cardview/notes';
const TAG = 'Zh_Carousel_Layout-01';
... ... @@ -40,19 +41,21 @@ class MyDataSource implements IDataSource {
@Component
export struct ZhCarouselLayout01 {
@StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
@StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string =
BreakpointConstants.BREAKPOINT_XS;
@State compDTO: CompDTO = {} as CompDTO
private data: MyDataSource = new MyDataSource([])
@State firstWd: number = 0
@State SecondWd: number = 0
@State swiperIndex: number = 0
private data: MyDataSource = new MyDataSource([])
watchCurrentBreakpoint() {
Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
}
aboutToAppear() {
Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
Logger.info(TAG,
`aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
let list: number[] = []
for (let i = 1; i <= this.compDTO?.operDataList?.length; i++) {
list.push(i);
... ... @@ -155,16 +158,21 @@ export struct ZhCarouselLayout01 {
}
public buildDisplayCount(): number {
return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
return new BreakPointType({
xs: 1,
sm: 1,
md: 2,
lg: 3
}).getValue(this.currentBreakpoint)
}
}
@Component
struct CarouselLayout01CardView {
@State loadImg: boolean = false;
private item: ContentDTO = new ContentDTO();
private length: number = 1; // 轮播图数量
@State loadImg: boolean = false;
async aboutToAppear(): Promise<void> {
this.loadImg = await onlyWifiLoadImg();
... ... @@ -187,29 +195,37 @@ struct CarouselLayout01CardView {
})
Column() {
// 这里用于展示轮播图右上角信息,这里只对直播类型的展示
if (this.item.objectType === '2' || this.item.objectType ==='4') {
if (this.item.objectType === '2' || this.item.objectType === '4') {
CardMediaInfo({ contentDTO: this.item })
.width(CommonConstants.FULL_PARENT)
}
Blank()
// 文本信息
Text(`${this.item.corner}${this.item.newsTitle}`)
.width(CommonConstants.FULL_PARENT)
.height(39)
.padding({
left: 10,
right: 10
})
.margin({
bottom: this.length > 1 ? 28 : 10
})
.fontColor(Color.White)
.fontSize($r('app.float.font_size_16'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
.align(Alignment.Bottom)
.maxLines(CompUtils.MAX_LINES_2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Stack() {
if (this.item.objectType == '5') {
Notes({ objectType: this.item.objectType })
}
Text(`${this.item.corner}${this.item.newsTitle}`)
.width(CommonConstants.FULL_PARENT)
.fontColor(Color.White)
.fontSize($r('app.float.font_size_16'))
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Start)
.align(Alignment.Bottom)
.maxLines(CompUtils.MAX_LINES_2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.textIndent(this.item.objectType == '5' ? 40 : 0)
}
// .height(39)
.padding({
left: 10,
right: 10
})
.margin({
bottom: this.length > 1 ? 28 : 10
})
.alignContent(Alignment.TopStart)
}
.width(CommonConstants.FULL_PARENT)
.height(CommonConstants.FULL_PARENT)
... ...
... ... @@ -16,29 +16,42 @@ export struct newsSkeleton {
Column() {
Image($r('app.media.peopleSeleton')).width('100%').height(47)// 后缀名不能省略
.interpolation(ImageInterpolation.High)
textArea('100%', 9)
}.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
textArea('100%', 8)
}
.width(124)
.alignItems(HorizontalAlign.Start)
.margin({ right: 5 })
Column() {
textArea(27, 25)
textArea(27, 4)
textArea(27, 20)
Row()
.width(27)
.height(25)
.backgroundColor('#FFF5F5F5')
Row()
.width(27)
.height(4)
.backgroundColor('#FFF5F5F5')
.margin({ top: 3, bottom: 3 })
Row()
.width(27)
.height(20)
.backgroundColor('#FFF5F5F5')
// textArea(27, 25)
// textArea(27, 4)
// textArea(27, 20)
}
.border({ width: 1 })
.borderColor('#FFF5F5F5')
.padding({
right: 2,
left: 2,
top: 0,
bottom: 2
right: 5,
left: 5,
top: 4,
bottom: 4
})
.justifyContent(FlexAlign.SpaceEvenly)
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(HorizontalAlign.Start)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('98%')
// .height(64)
.width('100%')
BoxAndLine().width('100%')
BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
... ... @@ -48,24 +61,27 @@ export struct newsSkeleton {
BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
}.width('45%')
.opacity(1)
.align(Alignment.Start)
.alignItems(HorizontalAlign.Start)
}
.width('50%')
.margin({ right: 5 })
Column() {
Column() {
textArea('100%', 13)
}.width('100%')
BoxAndLine()
Column() {
textArea('100%', 136)
textArea('100%', 13)
textArea('80%', 13)
}.width('100%').alignItems(HorizontalAlign.Start)
Column() {
textArea('95%', 126)
textArea('100%', 126)
}
Column() {
textArea('95%', 13)
textArea('100%', 13)
}
Row() {
... ... @@ -76,24 +92,28 @@ export struct newsSkeleton {
Column() {
textArea('100%', 30)
}.layoutWeight(1)
}.width('95%').justifyContent(FlexAlign.SpaceBetween)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
Column() {
textArea('95%', 100)
textArea('100%', 100)
}
}.width('45%')
}
.width('50%')
}
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
.padding({
top: 5,
bottom: 5,
right: 5,
left: 5
top: 15,
bottom: 15,
right: 15,
left: 15
})
Column().backgroundColor('#CBCBCB').height(5).width(339)
Column().backgroundColor('#909090').height(5).width(326)
}
.width('100%')
.padding({ right: 10, left: 10 })
}
.height('100%')
... ... @@ -107,7 +127,7 @@ struct BoxAndLine {
textArea('100%', 130)
textArea('100%', 13)
textArea('80%', 13)
}.width('98%').alignItems(HorizontalAlign.Start)
}.alignItems(HorizontalAlign.Start)
}
}
... ... @@ -140,18 +160,5 @@ function textArea(width: number | Resource | string = '100%', height: number | R
// .borderRadius(5)
}
// 全局公共样式
@Styles
function SkeletonStyle() {
.padding({ right: 14, left: 14 })
.width('100%')
.margin({ top: 5 })
}
@Extend(Column)
function RightStyle() {
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.SpaceAround)
.height('100%')
}
... ...