HarmonyOS鸿蒙Next中下拉刷新自定义刷新view loading会露出一半距离
HarmonyOS鸿蒙Next中下拉刷新自定义刷新view loading会露出一半距离
// xxx.ets @Entry @Component struct RefreshExample { @State isRefreshing: boolean = false @State arr: String[] = [‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘10’] @State arr2: String[] = [‘0’, ‘1’]
@Builder customRefreshComponent() { Stack() { Row() { LoadingProgress().height(32) Text(“正在刷新…”).fontSize(16).margin({ left: 20 }) }.alignItems(VerticalAlign.Center) }.width(“100%”).align(Alignment.Center) }
build() { Column() { Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) { Column() { Text(‘tttttt’).height(100) }.height(‘100%’) } .onStateChange((refreshStatus: RefreshStatus) => { console.info('Refresh onStatueChange state is ’ + refreshStatus) }) .onRefreshing(() => { setTimeout(() => { this.isRefreshing = false }, 2000) console.log(‘onRefreshing test’) }) .backgroundColor(0x89CFF0) .refreshOffset(64) .pullToRefresh(true) } } }
更多关于HarmonyOS鸿蒙Next中下拉刷新自定义刷新view loading会露出一半距离的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
需要去控制loading的显示于隐藏，示例代码如下
// xxx.ets
@Entry
@Component
struct RefreshPage {
@State isRefreshing: boolean = false
@State arr: String[] = ['0', '1']
@State refreshString: string = '下拉刷新'
@Builder
customRefreshComponent()
{
Stack()
{
Row()
{
if (this.refreshString == '正在刷新...') {
LoadingProgress().height(32)
}
Text("正在刷新...").fontSize(16).margin({left:20})
}
.alignItems(VerticalAlign.Center)
}.width("100%").align(Alignment.Center)
}
build() {
Column() {
Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent()}) {
Column(){
Text('tttttt').height(100)
}
.height('100%')
}
.onStateChange((refreshStatus: RefreshStatus) => {
if(refreshStatus == 1){
this.refreshString = '下拉刷新'
} else if (refreshStatus == 2){
this.refreshString = '松手刷新'
} else if (refreshStatus == 3){
this.refreshString = '正在刷新...'
} else if (refreshStatus == 4){
//this.showToast('刷新成功')
this.refreshString = '刷新成功'
}
})
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
this.refreshString = '刷新成功'
}, 2000)
console.log('onRefreshing test')
})
.backgroundColor(0x89CFF0)
.refreshOffset(64)
.pullToRefresh(true)
}
}
}更多关于HarmonyOS鸿蒙Next中下拉刷新自定义刷新view loading会露出一半距离的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，自定义下拉刷新时出现View Loading露出一半距离的情况，通常是由于刷新控件的高度或布局设置不当导致的。鸿蒙的下拉刷新控件RefreshContainer和RefreshController允许开发者自定义刷新视图，但需要确保自定义视图的高度与RefreshContainer的布局参数匹配。
如果自定义刷新视图的高度超出了RefreshContainer的预期高度，可能会导致刷新视图在加载时露出一半。可以通过以下方式调整：
-
检查自定义视图的高度：确保自定义刷新视图的高度与
RefreshContainer的布局参数一致，避免超出预期范围。 -
调整
RefreshContainer的布局参数：在布局文件中，检查RefreshContainer的高度设置，确保其能够完整显示自定义刷新视图。 -
刷新动画的起始位置：自定义刷新视图时，注意刷新动画的起始位置，确保动画从正确的位置开始，避免出现视图露出一半的情况。
-
使用
RefreshController的setRefreshView方法：通过RefreshController的setRefreshView方法设置自定义刷新视图时，确保视图的布局参数与RefreshContainer匹配。
如果以上调整仍无法解决问题，可能需要进一步检查自定义刷新视图的布局逻辑，确保其与RefreshContainer的布局机制兼容。
