首頁 > web前端 > uni-app > uniapp怎麼實現滾動加載

uniapp怎麼實現滾動加載

藏色散人
發布: 2023-01-13 00:44:30
原創
7539 人瀏覽過

uniapp實作捲動載入的方法:1、使用「onReachBottom(){console.log("...")}」方法;2、透過「...」方法。

uniapp怎麼實現滾動加載



uniapp怎麼實現滾動加載

##本教學操作環境:windows7系統、uni-app2.5.1版本,Dell G3電腦。

推薦(免費):uni-app教學


uniapp怎麼實現滾動加載

############# ##uniapp實作捲動到底部載入更多資料#########如果資料量非常大的話,資料批次載入是一種最佳化手段,那麼,如何實現?########## onReachBottom#########uniapp的生命週期###onReachBottom###### 頁面捲動到底部的事件(不是scroll-view滾到底),常用於上拉載入下一頁資料。如使用scroll-view導致頁面層級沒有捲動,則觸底事件不會被觸發#########onReachBottom 範例:######
onReachBottom(){
	console.log("我已经滚动到底部了")}
登入後複製
###當頁面捲動到底部時就會觸發這個事件##################這種方式適用於單一頁面,如果同一個頁面有多處捲動,那麼就該使用###scroll-view##### ########scroll-view#########可捲動檢視區域。用於區域捲動#########scroll-view 範例:######
<scroll-view scroll-y="true" @scrolltolower="lower()" :style="{height:scrollH+&#39;rpx&#39;}">
	// 内容
	</scroll-view>
登入後複製
methods:{
		lower(e)
		{
			console.log("已经滚动到底部了")
		}	
	},
computed:{
		scrollH:function(){
			let sys = uni.getSystemInfoSync();
			let winWidth = sys.windowWidth;
			let winrate = 750/winWidth;
			let winHeight =parseInt(sys.windowHeight*winrate)
			return winHeight	
		}
	}
登入後複製
###使用垂直捲動時,需要給予一個固定高度,透過css 設定###height#############詳見:uniapp中scroll view高度適應問題######當頁面捲動到底部時#####################

以上是uniapp怎麼實現滾動加載的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板