利用了层叠布局和一个scroll滚动组件。
包括底部导航、顶部导航、主体的滚动窗口。
主体的滚动窗口又包括一个快捷导航栏和一个导航窗口、以及主体部分
javascript
import text from '@ohos.graphics.text';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
//支付宝首页·
build() {
Stack({alignContent:Alignment.Bottom}){
//顶部导航
Stack({alignContent:Alignment.Top}){
Row(){
Column(){
Text('北京')
.fontSize(18)
.fontColor('#fff')
Text('晴 37C')//摄氏度的符号怎么打
.fontSize(12)
.fontColor('#fff')
Image($r('app.media.zfb_head_down'))
.width(12)
.fillColor('#fff')
.position({
x:40,
y:0
})
}
Row(){
Image($r('app.media.zfb_head_search'))
.width(20)
.fillColor('#666')
.margin({left:5, right:5})
Text('北京交通一卡通')
.layoutWeight(1)
Text('搜索')
.width(55)
.fontColor('#5b73de')
.fontWeight(700)
.textAlign(TextAlign.Center)
.border({
width:{left:1},
color:'#ccc'
})
}.height(32)
.layoutWeight(1)//自适应屏幕
.backgroundColor('#fff')
.borderRadius(5)
.margin({left:25, right:12})
Image($r('app.media.zfb_head_plus'))
.width(30)
.fillColor('#fff')
}.width('100%')
.height(60)
.backgroundColor('#5b7fde')
.zIndex(666)
.padding({left:10,right:10})
//Column和Row默认都没有滚动的效果
// Column(){
//
// }
//利用Scroll实现主体滚动部分
Scroll(){
Column(){
//top快捷按钮
Row(){
Column(){
Image($r('app.media.zfb_top_scan'))
.width(36)
.fillColor('#fff')
Text('扫一扫')
.fontColor('#fff')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_top_pay'))
.width(36)
.fillColor('#fff')
Text('收付款')
.fontColor('#fff')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_top_travel'))
.width(36)
.fillColor('#fff')
Text('出行')
.fontColor('#fff')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_top_card'))
.width(36)
.fillColor('#fff')
Text('卡包')
.fontColor('#fff')
}.layoutWeight(1)
}.width('100%')
.padding({top:5,bottom:15})
.backgroundColor('#5b7fde')
//主体导航区
Column({space:10}){
Row(){
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
}.width('100%')
Row(){
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
}.width('100%')
Row(){
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_nav1'))
.width(28)
.margin({bottom:8})
Text('滴滴出行')
.fontSize(12)
.fontColor('#666')
}.layoutWeight(1)
}.width('100%')
}
.width('100%')
.borderRadius({
topLeft:20,
topRight:20
})
.padding(10)
.backgroundColor(Color.White)
//产品区
Row({space:5}){
Image($r('app.media.zfb_pro_pic1'))
.layoutWeight(1)
Image($r('app.media.zfb_pro_pic2'))
.layoutWeight(1)
Image($r('app.media.zfb_pro_pic3'))
.layoutWeight(1)
}.backgroundColor(Color.White)
Column(){
Image($r('app.media.zfb_pro_list1'))
.width('100%')
Image($r('app.media.zfb_pro_list2'))
.width('100%')
}.backgroundColor(Color.White)
}.width('100%')
.backgroundColor('#5b73de')
}.width('100%')
.padding({top:60,bottom:60})
}.width('100%')
.height('100%')//占用全部空间
//底部导航栏
Row(){
Column(){
Image($r('app.media.zfb_tab_home'))
.width(35)
// Text('首页')
// .fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_money'))
.width(28)
Text('理财')
.fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_life'))
.width(28)
Text('生活')
.fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_chat'))
.width(28)
Text('消息')
.fontSize(12)
}.layoutWeight(1)
Column(){
Image($r('app.media.zfb_tab_me'))
.width(28)
.margin({bottom:2})
Text('我的')
.fontSize(12)
}.layoutWeight(1)
}
.width('100%')
.height(60)
.backgroundColor(Color.White)
}.width('100%')
.height('100%')
}
}