79 行
2.4 KiB
Plaintext
79 行
2.4 KiB
Plaintext
import { ToolsHelper } from '../utils/ToolsHelper'
|
|
|
|
@Preview
|
|
@Component
|
|
export struct RefreshView {
|
|
@Link isLoading: boolean
|
|
@Prop data: Array<ESObject>
|
|
@Require keyGenerator?: (item: ESObject, index: number) => string
|
|
pageSize: number = 10
|
|
onLoadMore?: (pageNum: number) => void
|
|
onRefresh?: () => void
|
|
private startY: number = 0
|
|
private endY: number = 0
|
|
private lastNum: number = 0
|
|
private _openMore: boolean = false
|
|
|
|
aboutToAppear(): void {
|
|
this.onRefresh && this.onRefresh()
|
|
}
|
|
|
|
// 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
|
|
@BuilderParam customBuilderParam: (item: ESObject, index: number) => void
|
|
|
|
build() {
|
|
|
|
Refresh({ refreshing: $$this.isLoading }) {
|
|
if (this.data && this.data.length > 0) {
|
|
List() {
|
|
ForEach(this.data ?? [], (item: ESObject, index: number) => {
|
|
ListItem() {
|
|
this.customBuilderParam(item, index)
|
|
}
|
|
}, (item: ESObject, index: number) => this.keyGenerator!(item, index))
|
|
}
|
|
.onTouch((event: TouchEvent) => {
|
|
const e1 = event.touches[0]
|
|
switch (event.type) {
|
|
case TouchType.Down:
|
|
this._openMore = this.data && this.lastNum >= this.data.length && !this.isLoading
|
|
this.startY = e1.y
|
|
break
|
|
case TouchType.Up:
|
|
this.endY = e1.y
|
|
if (this.endY - this.startY < -100 && this._openMore) {
|
|
const v = this.data && (this.data.length % this.pageSize) === 0
|
|
if (v) {
|
|
this.onLoadMore && this.onLoadMore(Math.floor(this.data.length / this.pageSize))
|
|
} else {
|
|
ToolsHelper.showMessage('没有更多数据了')
|
|
}
|
|
}
|
|
break
|
|
}
|
|
})
|
|
.onScrollIndex((first: number, last: number) => {
|
|
this.lastNum = last + 1
|
|
})
|
|
.width('100%')
|
|
.height('100%')
|
|
.alignListItem(ListItemAlign.Center)
|
|
.scrollBar(BarState.Off)
|
|
} else {
|
|
Text('暂无数据')
|
|
.width('100%')
|
|
.height('100%')
|
|
.textAlign(TextAlign.Center)
|
|
|
|
}
|
|
}
|
|
.width('100%')
|
|
.height('100%')
|
|
.onStateChange((refreshStatus: RefreshStatus) => {
|
|
// ToolsHelper.log('Refresh onStatueChange state is ' + refreshStatus)
|
|
})
|
|
.onRefreshing(() => {
|
|
this.onRefresh && this.onRefresh()
|
|
})
|
|
}
|
|
} |
