实战13-搜索模块滑动效果01

import { getHomeDataApi } from '../api/home';
import { BannerListDataSource, INavList, IPlanList, ITitleList } from '../api/models/HomeData';
import SwiperLayout from '../views/Home/SwiperLayout';
import { window } from '@kit.ArkUI';
import NavList from '../views/Home/NavList';
import { PADDING, SHADOW_RADIUS } from '../constants/size';
import SearchBar from '../views/Home/SearchBar';
import TitleList from '../views/Home/TitleList';
import PlanList from '../views/Home/PlanList';
import RoomRecommend from '../views/Home/RoomRecommend';

@Entry
@Component
export default struct Home {
  @State bannerList: BannerListDataSource = new BannerListDataSource()
  @State navList: INavList = []
  @State titleList: ITitleList = []
  @State planList: IPlanList = []
  @State adPicure: string = ''
  //获取首页数据的函数
  getHomeData = async () => {
    const result = await getHomeDataApi()
    this.bannerList.setList(result.bannerList)
    this.navList = result.navList;
    this.titleList = result.titleList;
    this.planList = result.planList;
    this.adPicure = result.adPicTure;

  }
  //存储滚动条位置（Y轴滚动距离）
  scrollY: number = 0;
  @State bgColor: string = 'rgba(0,0,0,0)'
  @State fontColor: string = 'rgba(255,255,255,1)'

  //生命周期函数：初始化渲染时候
  aboutToAppear(): void {
    this.getHomeData()

    window.getLastWindow(getContext())
      .then(win => {
        win.setWindowLayoutFullScreen(true)
      })
  }

  //处理滚动事件
  handleScroll = (xOffset: number, yOffset: number) => {
    //更新滚动距离
    this.scrollY += yOffset
    //计算颜色
    this.calcColor()
  }
  calcColor = () => {
    if (this.scrollY < 10) {
      //到达顶部 渐变开始
      this.bgColor = 'rgba(0,0,0,0)'
      this.fontColor = 'rgba(255,255,255,1)'
    } else if (this.scrollY < 100) {
      //渐变中(透明度0->1)
      const colorOpacity = (this.scrollY - 10) / (100 - 10)
      this.bgColor = `rgba(255,255,255,${colorOpacity})`
      this.fontColor = `rgba(0,0,0,${colorOpacity})`
    } else {
      //渐变全部完成
      this.bgColor = 'rgba(255,255,255)'
      this.fontColor = 'rgba(0,0,0)'
    }
  }

  build() {
    Stack() {
      Scroll() {
        Column() {
          //轮播图组件
          SwiperLayout({ bannerList: this.bannerList })
          Column() {
            //导航栏
            NavList({ navList: this.navList })
            // TitleList
            TitleList({ titleList: this.titleList })
            //计划列表
            PlanList({ planList: this.planList })
            //广告
            Image(this.adPicure)
              .width('100%')
              .height(60)
              .objectFit(ImageFit.Fill)
              .shadow(
                {
                  offsetX: 0,
                  offsetY: 0,
                  radius: SHADOW_RADIUS,
                  color: 'rgba(0,0,0.14)'
                }
              )
              .margin({ top: 10 })
          }
          .width('100%').padding({ left: PADDING, right: PADDING })

          //房源推荐
          RoomRecommend()
        }.width('100%')

      }
      .width('100%')
      .height('100%')
      .scrollBar(BarState.Off)
      .align(Alignment.TopStart)
      .onDidScroll(this.handleScroll)

      //搜索区
      SearchBar({ bgColor: this.bgColor, fontColor: this.fontColor })
    }.width('100%').alignContent(Alignment.TopStart)
  }
}

红色文字是新增或者修改的内容。

import { PADDING } from '../../constants/size';

@Component
export default struct SearchBar {
  @Prop bgColor: string;
  @Prop fontColor: string;

  build() {
    Row({ space: 16 }) {
      Text("长春").fontSize(14).fontColor(this.fontColor)
      Stack() {
        TextInput().width('100%').height('100%').backgroundColor($r('app.color.white')).border({
          width: 1,
          color: $r('app.color.gray')
        });
        Row() {
          Image($r('app.media.search')).width(18).height(18)
          Text('公司/地铁/小区 马上搜索')
            .fontSize(10)
            .fontColor($r('app.color.gray'))
            .layoutWeight(1)
            .margin({ left: 10, right: 10 })
          Column() {
          }.width(1).height(18).backgroundColor("#D7D7D7").margin({ right: 16 })

          Image($r('app.media.position')).width(18).height(18)
        }.width('100%').padding({ left: 16, right: 16 })
      }.width(244)

      Image($r('app.media.message')).width(24).height(24).fillColor(this.fontColor)
    }
    .width('100%')
    .height(38)
    .padding({
      left: PADDING,
      right: PADDING,
      top: 4,
      bottom: 4
    })
    .margin({ top: 4 })
    .backgroundColor(this.bgColor)
  }
}