鸿蒙应用开发之通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果

​

通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果

通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果

当上拉时，外层先滚动慢慢的黄色签到图片会消失、然后List列表可以继续上拉

效果预览：

实现思路：

1. 实现页面结构布局，红、黄、绿、列表

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色（不要放到Column   因为后续下面黄色、蓝、列表需要滚动  而这个红色不需要）
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 下述后续要上拉滚动
      Column() {
        // 黄色签到
        Text().width('100%').height(100).backgroundColor(Color.Yellow)
        // 蓝色 
        Text().width('100%').height(50).backgroundColor(Color.Blue)
        // 列表
        List() {
          ForEach('0123456789abcdefg'.split(''), (item:string) => {
            ListItem() {
              Text(item).height(50).fontSize(30)
            }
          })
        }.layoutWeight(1).divider({strokeWidth:2,color:Color.Red})
      }
    }
  }
}

2. 实现黄色、蓝色、列表上拉滚动 通过Scroll容器

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
        }
      }.layoutWeight(1)
    }
  }
}

3. 实现上拉黄色慢慢消失，蓝色吸顶效果

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
          // 核心2⭐：上拉黄色慢慢消失、蓝色一直在  也就是减去蓝色高度
          .height('calc(100% - 50vp)')
        }
      }.layoutWeight(1)
    }
  }
}

4. 通过nestedScroll属性实现外层滚动Scroll、内层List滚动控制

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
          // 核心2⭐：上拉黄色慢慢消失、蓝色一直在  也就是减去蓝色高度
          .height('calc(100% - 50vp)')
          // 核心3⭐️：向前向后滚动模式 -> 实现与父组件的滚动联动
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST, // 上拉
            scrollBackward: NestedScrollMode.SELF_FIRST   // 下拉
            // 不管父-SELF_ONLY、SELF_FIRST-到边缘管父、PARENT_FIRST-到边缘管子、PARALLEL-父子同时
            // 详细 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-appendix-enums-V13#nestedscrollmode10
          })
        }
      }.layoutWeight(1)
    }
  }
}

完整代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 红色
      Text().width('100%').height(150).backgroundColor(Color.Red)
      // 核心1⭐️：多层嵌套滚动
      Scroll() {
        Column() {
          // 黄色
          Text().width('100%').height(100).backgroundColor(Color.Yellow)
          // 蓝色
          Text().width('100%').height(50).backgroundColor(Color.Blue)
          // 列表
          List() {
            ForEach('0123456789abcdefg'.split(''), (item:string) => {
              ListItem() {
                Text(item).height(50).fontSize(30)
              }
            })
          }.divider({strokeWidth:2,color:Color.Red})
          // 核心2⭐：上拉黄色慢慢消失、蓝色一直在  也就是减去蓝色高度
          .height('calc(100% - 50vp)')
          // 核心3⭐️：向前向后滚动模式 -> 实现与父组件的滚动联动
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST, // 上拉
            scrollBackward: NestedScrollMode.SELF_FIRST   // 下拉
            // 不管父-SELF_ONLY、SELF_FIRST-到边缘管父、PARENT_FIRST-到边缘管子、PARALLEL-父子同时
            // 详细 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-appendix-enums-V13#nestedscrollmode10
          })
        }
      }.layoutWeight(1)
    }
  }
}

鸿蒙开发者班级

​