import { router } from '@kit.ArkUI';
interface ParamsObj { username: string; }
@Entry
@Component
struct yemianPage {
@State kucun:number=0;
@State FaddMode:boolean = true;
@State SaddMode:boolean = true;
@State TaddMode:boolean = true;
@State isFirstImage: boolean = true;
@State isSecondImage: boolean = true;
@State isThirdImage: boolean = true;
tabstring: string[] = ['猜你喜欢', '好友动态']
@State params: ParamsObj = { username: '' };
aboutToAppear(): void {
const rawParams = router.getParams() as Record<string, string> | undefined;
if (rawParams) {
this.params = { username: rawParams['username'] || '' };
}
}
myScroll: Scroller = new Scroller()
@State yOffset: number = 0 // 实时保存y轴滚动的距离
@State currentIndex: number = 0
private tabsController: TabsController = new TabsController()
@Builder
TabBuilder(title: string, targetIndex: number, normalImg: Resource, selectedImg: Resource) {
Column() {
Image(this.currentIndex == targetIndex ? selectedImg : normalImg)
.width(25)
.height(25)
Text(title)
.fontSize(12)
.fontWeight(500)
.fontColor(this.currentIndex == targetIndex ? '#fe6500' : '#2b2b2b')
}
.backgroundColor("#ffffff")
.width('100%')
.height(35)
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.currentIndex = targetIndex
this.tabsController.changeIndex(this.currentIndex)
})
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: 0 }) {
TabContent() {
Stack({ alignContent: Alignment.BottomEnd }) {
Column(){
// 搜索输入框
TextInput({ placeholder: '' })
.width('99%')
.backgroundColor(Color.White)
.margin({top:7,left:4})
// 搜索按钮
Button('搜索')
.width(60)
.height(40)
.fontSize(14)
.margin({left:301,top:-40})
.backgroundColor('#Fe6500')
.fontColor(Color.White)
}
.height(55)
.position({y:0})
.backgroundColor('#fe3942')
// 顶部滚动区域
// 2. 和Scroll容器绑定
Scroll(this.myScroll) {
Column() {
Image($r('app.media.yemian_1'))
Image($r('app.media.yemian_2'))
Image($r('app.media.yemian_3'))
Image($r('app.media.yemian_4'))
Image($r('app.media.yemian_5'))
}
}
.position({y:55})
.scrollBar(BarState.Off)
.width('100%')
.backgroundColor(Color.Orange)
.onScroll(() => {
this.yOffset = this.myScroll.currentOffset().yOffset
})
// 有时显示, 有时隐藏 → 条件渲染
if (this.yOffset > 400) {
Image($r('app.media.ic_backtotop'))
.width(40)
.backgroundColor(Color.White)
.borderRadius(20)
.padding(5)
.offset({ x: -20, y: -20 })
.onClick(() => {
// 3. 调用实例方法完成回到顶部的功能
this.myScroll.scrollEdge(Edge.Top)
})
}
}
}.tabBar(this.TabBuilder('首页', 0, $r('app.media.ic_home'), $r('app.media.ic_home_orange')))
TabContent() {
Swiper() {
Image($r("app.media.shipin_1"))
Image($r('app.media.shipin_2'))
Image($r('app.media.shipin_3'))
Image($r('app.media.shipin_4'))
Image($r('app.media.shipin_5'))
}
.width('99%')
.height('100%')
.loop(true)
.autoPlay(true)
.interval(2500)
.vertical(true)
.indicator(false)
}.tabBar(this.TabBuilder('视频', 1, $r('app.media.ic_play'), $r('app.media.ic_play_orange')))
TabContent() {
Stack({ alignContent: Alignment.BottomEnd }) {
Column(){
Text('消息')
.fontSize(20)
.fontColor(Color.White)
.fontWeight(300)
.margin({top:15,left:-310})
Image($r('app.media.ic_search'))
.width(30)
.margin({top:-30,left:200})
Image($r('app.media.ic_add'))
.width(30)
.margin({top:-30,left:300})
}
.width('100%')
.height(50)
.backgroundColor('#fb344b')
.position({y:0})
// 顶部滚动区域
// 2. 和Scroll容器绑定
Scroll(this.myScroll) {
Column() {
Image($r('app.media.xiaoxi_1'))
Image($r('app.media.xiaoxi_2'))
Image($r('app.media.xiaoxi_3'))
}
}.position({y:50})
.scrollBar(BarState.Off)
.width('100%')
.backgroundColor(Color.Orange)
.onScroll(() => {
this.yOffset = this.myScroll.currentOffset().yOffset
})
// 有时显示, 有时隐藏 → 条件渲染
if (this.yOffset > 400) {
Image($r('app.media.ic_backtotop'))
.width(40)
.backgroundColor(Color.White)
.borderRadius(20)
.padding(5)
.offset({ x: -20, y: -20 })
.onClick(() => {
// 3. 调用实例方法完成回到顶部的功能
this.myScroll.scrollEdge(Edge.Top)
})
}
}
}.tabBar(this.TabBuilder('消息', 2, $r('app.media.ic_comments'), $r('app.media.ic_comments_orange')))
TabContent() {
Column(){
Image($r("app.media.gouwu_top"))
.width('100%')
.margin({top:-25})
Row() {
Image(this.isFirstImage ? $r('app.media.ic_circle') : $r('app.media.ic_todo'))
.onClick(() => {
this.isFirstImage = !this.isFirstImage;// 点击时切换图片状态
if (this.FaddMode) {
this.kucun += 58.5;
} else {
this.kucun -= 58.5;
}
this.FaddMode = !this.FaddMode;// 切换模式，下次点击执行相反操作
})
.width('100%')
.width(20)
.height(20)
Text(' 淘宝 ')
.fontColor('#fe6500')
Text(' 品质女装店 ')
.fontSize(14)
Image($r("app.media.jd_right"))
.width(20)
.height(20)
.fillColor(Color.Black)
Text(' 领券 > ')
.fontSize(14)
.fontColor(Color.Gray)
.margin({left:145})
}.margin({top:5,bottom:5})
Row() {
Image($r('app.media.lvqun'))
.width(120).height(120)
.borderRadius({
topLeft: 10,
topRight: 10,
bottomLeft: 10,
bottomRight: 10
})
.margin({ left: -130 })
Text('法式甜美吊带连衣裙')
.margin({ top: -90, left:10 })
Text('×1')
.fontColor(Color.Gray)
.margin({ top: -90})
Text('单件；L > ')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: -44, left: -165 })
Text('7天无理由退货 | 极速退款')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: -4, left: -63 })
Text('券后￥58.5 ')
.fontSize(17)
.fontColor('#fe6500')
.margin({ top: 35, left: -159 })
Text('￥158.5')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: 38, left: 0 })
Text('官方立减100')
.fontSize(14)
.fontColor('#fe6500')
.margin({ top: 74, left: -138 })
}
Row() {
Image(this.isSecondImage ? $r('app.media.ic_circle') : $r('app.media.ic_todo'))
.onClick(() => {
this.isSecondImage = !this.isSecondImage;// 点击时切换图片状态
if (this.SaddMode) {
this.kucun += 42.5;
} else {
this.kucun -= 42.5;
}
this.SaddMode = !this.SaddMode;// 切换模式，下次点击执行相反操作
})
.width('100%')
.width(20)
.height(20)
Text(' 淘宝 ')
.fontColor('#fe6500')
Text(' 留奢旗舰店 ')
.fontSize(14)
Image($r("app.media.jd_right"))
.width(20)
.height(20)
.fillColor(Color.Black)
Text(' 领券 > ')
.fontSize(14)
.fontColor(Color.Gray)
.margin({left:145})
}.margin({top:5,bottom:5})
Row() {
Image($r('app.media.lanqun'))
.width(120).height(120)
.borderRadius({
topLeft: 10,
topRight: 10,
bottomLeft: 10,
bottomRight: 10
})
.margin({ left: -125 })
Text('开衫配吊带连衣裙')
.margin({ top: -90,left:10})
Text('×1')
.fontColor(Color.Gray)
.margin({ top: -90 })
Text('单件；M > ')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: -44, left: -145 })
Text('7天无理由退货 | 极速退款')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: -4, left: -68 })
Text('券后￥42.5 ')
.fontSize(17)
.fontColor('#fe6500')
.margin({ top: 35, left: -159 })
Text('￥192.5')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: 38, left: 0 })
Text('官方立减150')
.fontSize(14)
.fontColor('#fe6500')
.margin({ top: 74, left: -138 })
}
Row() {
Image(this.isThirdImage ? $r('app.media.ic_circle') : $r('app.media.ic_todo'))
.onClick(() => {
this.isThirdImage = !this.isThirdImage;// 点击时切换图片状态
if (this.TaddMode) {
this.kucun += 134;
} else {
this.kucun -= 134;
}
this.TaddMode = !this.TaddMode;// 切换模式，下次点击执行相反操作
})
.width('100%')
.width(20)
.height(20)
Text(' 淘宝 ')
.fontColor('#fe6500')
Text(' 仙莉服饰店 ')
.fontSize(14)
Image($r("app.media.jd_right"))
.width(20)
.height(20)
.fillColor(Color.Black)
Text(' 领券 > ')
.fontSize(14)
.fontColor(Color.Gray)
.margin({left:145})
}.margin({top:5,bottom:5})
Row() {
Image($r('app.media.huangqun'))
.width(120).height(120)
.borderRadius({
topLeft: 10,
topRight: 10,
bottomLeft: 10,
bottomRight: 10
})
.margin({ left: -135 })
Text('度假风荷叶边连衣裙')
.margin({ top: -90,left:10})
Text('×1')
.fontColor(Color.Gray)
.margin({ top: -90 })
Text('单件；L > ')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: -44, left: -164 })
Text('7天无理由退货 | 极速退款')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: -4, left: -62 })
Text('券后￥134 ')
.fontSize(17)
.fontColor('#fe6500')
.margin({ top: 35, left: -159 })
Text('￥184')
.fontSize(14)
.fontColor(Color.Gray)
.margin({ top: 38, left: 0 })
Text('官方立减50')
.fontSize(14)
.fontColor('#fe6500')
.margin({ top: 74, left: -120 })
}
Row(){
Text(' ')
.backgroundColor('#efefef')
.height(50)
.margin({top:6})
}
Row() {
Text('合计:')
.fontSize(14)
Text('￥'+this.kucun.toString()+' ')
.width(200)
.fontSize(22)
.fontColor('#fe6500')
Button('结算')
.width(108)
.height(47)
.fontColor(Color.White)
.fontSize(18)
.fontWeight(500)
.backgroundColor('#fe6500')
.onClick(()=>{
AlertDialog.show({
message: '下单成功'
})
})
.borderRadius({ topRight:5,topLeft:5,bottomRight:5,bottomLeft:5 })
}.margin({top:5})
}
}.tabBar(this.TabBuilder('购物车', 3, $r("app.media.ic_car"), $r("app.media.ic_car_orange")))
TabContent() {
Stack({ alignContent: Alignment.BottomEnd }) {
Column(){
Image($r('app.media.touxiang'))
.width(60)
.height(60)
.borderRadius({ topLeft:30, bottomLeft:30, topRight:30, bottomRight:30 })
.border({
width:{ left:2, right:2, bottom:2, top:2 },
color:{ top:Color.White, bottom:Color.White, left:Color.White, right:Color.White },
})
.margin({top:10,left:-290})
Text(` ${this.params.username} `)
.fontColor(Color.White)
.margin({top:-56,left:-180})
Image($r('app.media.ic_gps'))
.width(30)
.margin({top:-20,left:200})
Text('地址')
.fontColor(Color.White)
.margin({top:6,left:200})
Image($r('app.media.ic_settings'))
.width(30)
.margin({top:-55,left:300})
Text('设置')
.fontColor(Color.White)
.margin({top:6,left:300})
}
.position({y:-5})
.height(80)
.width('100%')
.backgroundColor('#fe3942')
Column(){
Image($r('app.media.zhuye_1'))
.width(370)
.position({y:70,x:0})
}
Column() {
Tabs() {
ForEach(this.tabstring, (item: string, index) => {
TabContent() {
if (item === '猜你喜欢') {
Column() {
// **添加滚动图片区域**
Scroll(this.myScroll) {
Column() {
Image($r('app.media.zhuye_2'))
.width('100%')
Image($r('app.media.zhuye_3'))
.width('100%')
Image($r('app.media.zhuye_4'))
.width('100%')
Image($r('app.media.zhuye_5'))
.width('100%')
}
}
.margin({top:-200})
.scrollBar(BarState.Off)
.width('100%')
.height(400) // 设置固定高度，避免内容溢出
.backgroundColor('#f5f5f5')
.onScroll(() => {
this.yOffset = this.myScroll.currentOffset().yOffset
})
}
} else if (item === '好友动态') {
// 好友动态内容保持不变...
Column() {
// **添加滚动图片区域**
Scroll(this.myScroll) {
Column() {
Image($r('app.media.haoyou_1'))
.width('100%')
Image($r('app.media.haoyou_2'))
.width('100%')
Image($r('app.media.haoyou_3'))
.width('100%')
Image($r('app.media.haoyou_4'))
.width('100%')
Image($r('app.media.haoyou_5'))
.width('100%')
}
}
.margin({top:-200})
.scrollBar(BarState.Off)
.width('100%')
.height(400) // 设置固定高度，避免内容溢出
.backgroundColor('#f5f5f5')
.onScroll(() => {
this.yOffset = this.myScroll.currentOffset().yOffset
})
}
}
}
.tabBar(item)
})
}
.barMode(BarMode.Scrollable)
.vertical(false)
.animationDuration(100)
}.position({y:300})
}
}.tabBar(this.TabBuilder('我的淘宝', 4, $r('app.media.ic_people'), $r('app.media.ic_people_orange')))
}
.scrollable(false)
.animationDuration(0)
}
.width('100%')
.height('100%')
}
}改变‘猜你喜欢’和‘好友动态’，字的颜色
最新发布
本文介绍了解决ASP.NET中出现的CS1061编译错误的方法，该错误通常由于按钮事件定义缺失引起。文章分享了一种通过调整解决方案的输出路径来修复此问题的有效策略。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
