HarmonyOS 鸿蒙Next 仿[京东]购物车列表滑动实现：手指上滑隐藏[顶部标题]，手指下滑显示[顶部标题]

HarmonyOS 鸿蒙Next 仿[京东]购物车列表滑动实现：手指上滑隐藏[顶部标题]，手指下滑显示[顶部标题] 代码如下, 需求: 在手指上滑时[绿色区域]隐藏,手指下滑时[绿色区域]显示,请各位大显神通帮帮我,是真的不知道怎么搞了!

// TODO 数据类
class AllList {
  topList: string;
  newsList: string[];

  constructor(topList: string, newsList: string[]) {
    this.topList = topList
    this.newsList = newsList
  }
}

// TODO 假数据
const FOOD_DATA: AllList[] = [
  {
    topList: '购物车',
    newsList: ['蔬菜', '水果', '火锅', '烧烤', '米饭']
  },
  {
    topList: '优惠卷',
    newsList: ['酱油', '大蒜', '面条', '牙刷', '试卷', '大葱']
  }
]

@Entry
@Component
struct DongList {
  @State newsList: AllList[] = FOOD_DATA

  @Builder topHeader($$: { item: string }) {
    Row() {
      Text($$.item)
    }.width('100%').height(50).backgroundColor('#ff0000')
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {

      Text('不一定是那个位置,如果在其他位置实现效果也可以')

      List() {

        ListItem() {
          Text('我想要这个位置手指下滑时显示,手指上滑时隐藏')
            .width('100%').height(50).backgroundColor('#78a355')
        }

        ForEach(this.newsList, (item: AllList) => {
          ListItemGroup({ header: this.topHeader({ item: item.topList }) }) {
            ForEach(item.newsList, (item: string) => {
              ListItem() {
                Column() {
                  Text(item).width('100%').height(200).textAlign(TextAlign.Center).backgroundColor('#c0c0c0')
                  Divider().strokeWidth(1).color('#000000')
                }
              }
            }, (item: string) => item)
          }
        }, (item: AllList) => item.topList)


      }.width('100%').height('100%').sticky(StickyStyle.Header).edgeEffect(EdgeEffect.None)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 仿[京东]购物车列表滑动实现：手指上滑隐藏[顶部标题]，手指下滑显示[顶部标题]的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复 
楼主您好，您提供的代码是可以隐藏的呀。

![cke_873.png](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/717/497/767/0030086000717497767.20240221165356.47644260959664547899784740683421:50001231000000:2800:4A2CA6499EC40DC5C3B2274B8ECAEC19CCDB51AC344F174D44B80D4FBD9BD5D8.png)

![cke_1089.png](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/717/497/767/0030086000717497767.20240221165407.57585887758670204245006274632528:50001231000000:2800:A240D11490ED9A27E693317489B70AA1FF1841130C0D2C657AEB7F903A9787CB.png)

更多关于HarmonyOS 鸿蒙Next 仿[京东]购物车列表滑动实现：手指上滑隐藏[顶部标题]，手指下滑显示[顶部标题]的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


但是下滑的时候，它不能显示出来，可以去看一下小红书的主页，下滑的效果，

我的截图不是显示出来了吗，这是下滑的截图，不是这个效果吗，

这样①先把列表上滑到中间部分（绿色区域不要显示）②再下滑列表（绿色区域要显示），

API10中list组件有一个属性 nestedScroll 可以实现这种效果, 但是现在我不能验证。

不一定是那个位置,如果在其他位置实现效果也可以

我想要这个位置手指下滑时显示,手指上滑时隐藏

厉害啦，哥！就是这个效果，但是有时候下滑的时候，页面底部可能会有闪烁，我再研究一下，

在HarmonyOS鸿蒙Next中，实现类似京东购物车列表滑动时隐藏和显示顶部标题的效果，可以通过ScrollView或ListContainer结合手势监听来实现。

  1. 布局结构：在布局文件中，顶部标题和列表内容分别放置。顶部标题通常使用Text或Image组件，列表内容使用ListContainer或ScrollView。

  2. 手势监听：使用Gesture或TouchEvent监听滑动事件。通过判断滑动的方向（上滑或下滑），控制顶部标题的显示和隐藏。

  3. 动画效果：使用Animator或Transition组件实现顶部标题的平滑隐藏和显示。通过设置translateY属性，控制标题的垂直移动。

  4. 代码示例：

    import { ScrollView, Text, Animator } from '[@ohos](/user/ohos).鴻蒙';

let scrollView = new ScrollView();
let title = new Text();
let isTitleVisible = true;

scrollView.onScroll((event) => {
    if (event.deltaY > 0 && isTitleVisible) {
        // 上滑隐藏标题
        Animator.animate(title).translateY(-title.height).duration(300).start();
        isTitleVisible = false;
    } else if (event.deltaY < 0 && !isTitleVisible) {
        // 下滑显示标题
        Animator.animate(title).translateY(0).duration(300).start();
        isTitleVisible = true;
    }
});

通过以上步骤，可以在鸿蒙Next中实现类似京东购物车列表滑动时隐藏和显示顶部标题的效果。

回到顶部