Waterfall ​

<script setup>
	import * as plus from '@/uni_modules/ux-plus'
	import { UxSliderEvent } from '@/uni_modules/ux-frame';
	
	const title = ref('')
	
	const col = ref(2)
	const list = ref<UTSJSONObject[]>([] as UTSJSONObject[])
	const refresherTriggered = ref(false)
	const lastPage = ref(false)
	
	const uxWaterfallRef = ref<UxWaterfallComponentPublicInstance | null>(null)
	
	const loadmoreEnabled = computed((): boolean => {
		return list.value.length >= 10
	})
	
	function getList(refresh: boolean) {
		if(refresh) {
			lastPage.value = false
			refresherTriggered.value = true
		}
		
		if(list.value.length == 0) {
			uni.showLoading({
				title: 'loading...'
			})
		}
		
		uni.request<UTSJSONObject[]>({
			url: 'https://unidemo.dcloud.net.cn/api/news?column=title,author_name,cover,published_at',
			method:"GET",
			success: (res: RequestSuccess<UTSJSONObject[]>) => {
				if (res.statusCode == 200) {
					const result = res.data
					
					if(result != null){
						if(refresh) {
							list.value = result
						} else {
							if(result.length == 0) {
								lastPage.value = true
							} else {
								result.forEach((e: UTSJSONObject) => {
									list.value.push(e)
								})
							}
						}
					}
				}
			},
			fail: (err) => {
				console.log(err);
			},
			complete:() => {
				uni.hideLoading()
				
				if(refresh) {
					refresherTriggered.value = false
				}
				
				uxWaterfallRef.value!.loadSuccess(lastPage.value)
			}
		});
	}
	
	function onRefresh() {
		getList(true)
	}
	
	function onLoadmore() {
		getList(false)
	}
	
	function change(e: UxSliderEvent) {
		col.value = e.value
	}
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/waterfall.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
		
		getList(false)
	})
</script>

<script setup>
	import * as plus from '@/uni_modules/ux-plus'
	import { UxSliderEvent } from '@/uni_modules/ux-frame';
	
	const title = ref('')
	
	const col = ref(2)
	const list = ref<UTSJSONObject[]>([] as UTSJSONObject[])
	const refresherTriggered = ref(false)
	const lastPage = ref(false)
	
	const uxWaterfallRef = ref<UxWaterfallComponentPublicInstance | null>(null)
	
	const loadmoreEnabled = computed((): boolean => {
		return list.value.length >= 10
	})
	
	function getList(refresh: boolean) {
		if(refresh) {
			lastPage.value = false
			refresherTriggered.value = true
		}
		
		if(list.value.length == 0) {
			uni.showLoading({
				title: 'loading...'
			})
		}
		
		uni.request<UTSJSONObject[]>({
			url: 'https://unidemo.dcloud.net.cn/api/news?column=title,author_name,cover,published_at',
			method:"GET",
			success: (res: RequestSuccess<UTSJSONObject[]>) => {
				if (res.statusCode == 200) {
					const result = res.data
					
					if(result != null){
						if(refresh) {
							list.value = result
						} else {
							if(result.length == 0) {
								lastPage.value = true
							} else {
								result.forEach((e: UTSJSONObject) => {
									list.value.push(e)
								})
							}
						}
					}
				}
			},
			fail: (err) => {
				console.log(err);
			},
			complete:() => {
				uni.hideLoading()
				
				if(refresh) {
					refresherTriggered.value = false
				}
				
				uxWaterfallRef.value!.loadSuccess(lastPage.value)
			}
		});
	}
	
	function onRefresh() {
		getList(true)
	}
	
	function onLoadmore() {
		getList(false)
	}
	
	function change(e: UxSliderEvent) {
		col.value = e.value
	}
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/waterfall.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
		
		getList(false)
	})
</script>