二，首页内容

1，首页滚动吸顶效果

scroll的onDidScroll属性检测滚动的变化，

“onDidScroll” 就是专门用来响应滚动事件的函数,在里面添加代码来处理滚动时想要实现的效果

判断偏移量来进行吸顶效果的实现，如果总偏移量大于安全区高度，并且没有超过自身的高度时，边界值的透明度在变化，如果总偏移量大于等于安全区高度加上自身高度，透明度变为1

  @State
  searchOpacity: number = 0 // 悬浮搜索框的透明度
  @State
  yOffset: number = 0 // 总偏移量

RelativeContainer(){
Scroll（）{....}
.onDidScroll((xOffset: number, yOffset: number) => {
  //纵向滚动偏移量,
  this.yOffset += yOffset //总偏移量，累积的滚动的距离
  // 边界值
  if (this.yOffset > this.topHeight && this.yOffset < (this.topHeight + 40)) {
    //如果总偏移量大于安全区高度，并且没有超过自身的高度时，边界值的透明度在变化
    this.searchOpacity = (this.yOffset - this.topHeight) / 40 //过渡

  }else if(this.yOffset>=(this.topHeight+40)){
    //如果总偏移量大于等于安全区高度加上自身高度，透明度变为1
    this.searchOpacity = 1 // 完全显示
  }else{
    this.searchOpacity=0/// 完全隐藏
  }
})

// 搜索 随着 滚动条的滚动 透明度变化
Row() {
  Row({ space: 4 }) {
    Image($r('[basic].media.ic_public_search'))
      .width(16)
      .height(16)
      .fillColor($r('[basic].color.white'))
    Text('搜索...')
      .fontSize(14)
      .fontColor($r('[basic].color.white'))
  }
  .backgroundColor('#33191919')
  .width('100%')
  .height(40)
  .borderRadius(20)
  .padding({ left: 12 })
}
.padding({
  left: 16,
  right: 16,
  top: this.topHeight,
  bottom: this.topHeight
})
.opacity(this.searchOpacity)
.backgroundColor($r("[basic].color.white"))
.linearGradient({
  direction: GradientDirection.Bottom,
  colors: [["#ffdebfee", 0], [$r("[basic].color.white"), 1]]
})

}

import { BreakPointEnum, BreakPointUtils, CategoryItem, GlobalVariable, HDMGoodsItem } from 'basic'
import {
  getBannerAPI,
  getCategoryAPI,
  getHomeNewAPI,
  getHotResultAPI,
  getInVogueAPI,
  getOneStopAPI,
  getTuiJianListAPI
} from '../api/home'
import { HDMDiscountGoods, HDMGoods } from '../components'
import { Banner, DiscountType, Params, TuiJianList } from '../viewmodels'


@Component
export struct HomeView {
  @StorageProp(GlobalVariable.BREAK_POINT_KEY)
  breakPoint: string = ""
  @StorageProp(GlobalVariable.SAFE_AREA_TOP)
  topHeight: number = 0
  // 轮播图
  @State banners: Banner[] = []
  // 分类列表
  @State categories: CategoryItem[] = []
  // 特惠推荐
  @State saleGoods: HDMGoodsItem[] = []
  // 爆款推荐
  @State hotGoods: HDMGoodsItem[] = []
  // 一站买全
  @State oneGoods: HDMGoodsItem[] = []
  // 新鲜好物
  @State newGoods: HDMGoodsItem[] = []
  // 推荐商品
  @State recommendGoods: TuiJianList[] = []
  @State searchOpacity: number = 0 //炫富搜索框的透明度、
  @State yOffset: number = 0 //总偏移量

  // 轮播图
  async getBanner() {
    this.banners = await getBannerAPI()
  }

  //分类列表
  async getCategory() {
    this.categories = await getCategoryAPI()
  }

  // 特惠推荐
  async getHotResult() {

    this.saleGoods = (await getHotResultAPI())?.subTypes[1]?.goodsItems?.items

  }

  // 爆款推荐
  async getInVogue() {
    this.hotGoods = (await getInVogueAPI()).subTypes[0].goodsItems.items!
  }

  //一站买全
  async getOneStop() {
    this.oneGoods = (await getOneStopAPI()).subTypes[0].goodsItems.items!
  }

  // 新鲜好物
  async getHomeNew() {
    this.newGoods = await getHomeNewAPI()
  }

  //推荐列表
  async getTuiJianList() {
    this.recommendGoods = await getTuiJianListAPI()
  }

  //一进来页面就调接口获取数据
  aboutToAppear(): void {
    this.getBanner() //首页轮播图
    this.getCategory() //分类列表
    this.getHotResult() //特惠
    this.getInVogue() //  爆款
    this.getOneStop() // 一站买全
    this.getHomeNew() // 新鲜好物
    this.getTuiJianList() //推荐列表
  }

  @Builder
  DiscountBuilder(params: Params) {
    Column() {
      Row({ space: 10 }) {
        Text(params.title)
          .fontColor($r('[basic].color.black'))
          .fontSize(14)
        Text(params.subTitle)
          .fontColor($r('[basic].color.text'))
          .fontSize(11)
      }
      .width('100%')
      .margin({ bottom: 10 })

      List({ space: 10 }) {
        ForEach(params.list, (item: HDMGoodsItem) => {
          ListItem() {
            HDMDiscountGoods({ type: DiscountType.DISCOUNT, goods: item })
          }
        })
      }
      .width('100%')
      .height(116)
      .scrollBar(BarState.Off)
      .listDirection(Axis.Horizontal)
    }
    .height(160)
    .layoutWeight(1)
    .padding(10)
    .backgroundColor(params.bg)
    .borderRadius(