uniapp怎么实现滚动加载
Jan 18, 2021 pm 02:08 PMuniapp实现滚动加载的方法:1、使用“onReachBottom(){console.log("...")}”方法;2、通过“<scroll-view scroll-y="true"...}">...”方法。
本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。
推荐(免费):uni-app教程
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+'rpx'}"> // 内容 </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高度适应问题
当页面滚动到底部时
Atas ialah kandungan terperinci uniapp怎么实现滚动加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana untuk memulakan pratonton projek uniapp yang dibangunkan oleh webstorm

Mana satu lebih baik, uniapp atau mui?

Apakah alat pembangunan yang digunakan oleh uniapp?

Apakah asas yang diperlukan untuk mempelajari uniapp?

Perbandingan mendalam antara Flutter dan uniapp: terokai persamaan, perbezaan dan ciri mereka

Mana yang lebih baik, pembangunan uniapp atau asli?

Apakah perpustakaan komponen yang digunakan oleh uniapp untuk membangunkan program kecil?
