HarmonyOS 鸿蒙next中使用PullToRefresh如何通过setHasRefresh去掉下拉刷新
HarmonyOS 鸿蒙next中使用PullToRefresh要通过setHasRefresh去掉下拉刷新可以参考下面代码
PullToRefresh官网https://gitee.com/openharmony-sig/ohos_pull_to_refresh
PullToRefresh 去掉下拉刷新完整代码:
import { HttpGet } from '../common/HttpUtil'
import { NewsModel } from '../models/NewModel'
import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh'
@Entry
@Component
struct Index {
//scroller需要在list里面绑定还需要在PullToRefresh绑定
private scroller: Scroller = new Scroller();
@State newsList: NewsModel[] = []
@State hasMore: boolean = true
@State page: number = 1
pullToRefreshConfigurator?:PullToRefreshConfigurator
aboutToAppear() {
this.getNewsList()
this.pullToRefreshConfigurator=new PullToRefreshConfigurator()
this.pullToRefreshConfigurator.setHasRefresh(false)
}
//上拉分页
getNewsList(resolve?: (value: string | PromiseLike<string>) => void) {
let apiUri: string = `https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${this.page}`
console.log(apiUri)
HttpGet(apiUri).then((response) => {
// console.log(JSON.stringify(response))
if (response.success) {
let data: string = JSON.stringify(response.result)
let result: NewsModel[] = JSON.parse(data)
//判断有没有数据
if (result.length < 20) {
this.hasMore = false
}
this.newsList = this.newsList.concat(result) //拼接数据 [1,2,3] 和[4,5]拼接以后得到的数据就是[1,2,3,4,5]
this.page++
if (resolve) {
resolve("")
}
}
})
}
//下拉刷新
getRefreshList(resolve?: (value: string | PromiseLike<string>) => void) {
let apiUri: string = `https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1`
HttpGet(apiUri).then((response) => {
// console.log(JSON.stringify(response.result))
if (response.success) {
let data: string = JSON.stringify(response.result)
let result: NewsModel[] = JSON.parse(data)
this.newsList =result
this.page=2
this.hasMore=true;
if (resolve) {
resolve('刷新成功')
}
}
})
}
@Builder
NewsListWidget() {
List({
space: 40,
scroller: this.scroller
}) {
ForEach(this.newsList, (item: NewsModel) => {
ListItem() {
Text(item.title)
.maxLines(1)
.fontSize(18)
.width("100%").textOverflow({
overflow: TextOverflow.Clip
})
}
})
if (!this.hasMore) {
ListItem() {
Text("------我是有底线的-------")
.maxLines(1)
.fontSize(18)
.textAlign(TextAlign.Center)
.width("100%")
.margin({
top: 20,
bottom: 20
})
}
}
}.divider({
strokeWidth: 0.5,
color: "#eee"
})
.padding(10)
.edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
}
build() {
Column() {
PullToRefresh({
// 可选参数,列表组件所绑定的数据
// data: this.newsList,
// 必传项,需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项,自定义主体布局,内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.NewsListWidget();
},
// 可选项,下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
this.getRefreshList(resolve)
});
},
// 可选项,上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
this.getNewsList(resolve)
});
},
customLoad: null,
customRefresh: null,
refreshConfigurator:this.pullToRefreshConfigurator
})
}
.width('100%')
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙next中使用PullToRefresh如何通过setHasRefresh去掉下拉刷新 的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html