可以参考此文档链接进行页面开发设计：https://developer.huawei.com/consumer/cn/forum/topic/0204150582640684026
核心代码如下：
build() {
Column() {
// 搜索框 置顶
if (this.searchSticky) {
this.searchBarBuilder()
}
// 下拉刷新组件
Refresh({ refreshing: $$this.isRefreshing }) {
// List组件作为长列表布局
List({ space: 10 }) {
// 搜索框跟随
if (!this.searchSticky) {
ListItem() {
this.searchBarBuilder()
}
}
// ListItem 自定义Swiper轮播图模块
ListItem() {
this.bannerBuilder()
}
// ListItem 自定义Grid快接入口模块
ListItem() {
this.quickBuilder()
}
// ListItem 自定义Column秒杀模块
ListItem() {
this.flashBuilder()
}
// ListItemGroup 商品分类列表
this.productsBuilder()
// 最后ListItem 自定义触底加载更多
ListItem() {
this.footerLoadingBuilder()
}.height(50).width('100%').backgroundColor(0xeeeeee)
}
.sticky(StickyStyle.Header)
.edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
.height('100%')
.layoutWeight(2)
// List组件触底模拟网络请求
.onReachEnd(() => {
if (this.productsArray.length >= 20) {
this.noMoreData = true
return
}
setTimeout(() => {
this.productsArray.push('商品' + (this.productsArray.length + 1))
}, 2000)
})
}
// 下拉刷新模拟网络请求
.onRefreshing(() => {
setTimeout(() => {
this.productsArray = ['商品1', '商品2', '商品3', '商品4', '商品5']
this.noMoreData = false
this.isRefreshing = !this.isRefreshing
}, 2000)
})
.layoutWeight(1)
.width('95%')
}
}
其他常见问题
1，滑动卡顿
LazyForEach数据懒加载：数据量大的List尽量用LazyForEach加载数据，可明显优化性能，经过测试列数为100以上，LazyForEach也无明显卡顿。
2，错位分析
查看左右List行高是否一致，ListItemGroup高度是否一致；onScrollFrameBegin联动回调中是否跟随保持一致。
3，嵌套滚动
如需要外层附加其他滚动，可运用嵌套属性.nestedScroll进行联动
