uniapp-【scroll-view】

最新推荐文章于 2024-08-22 11:53:20 发布

if.else.Z

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量2.2k

点赞数 1

分类专栏： uniapp

本文链接：https://blog.csdn.net/zdq357104345/article/details/115003007

版权

本文探讨了uniApp中scroll-view组件的使用技巧，强调在竖向滚动时需设定固定高度以优化性能。指出scroll-view不适用于长列表，推荐使用原生导航栏结合页面滚动和下拉刷新。同时，提到了scroll-into-view和scroll-top的优先级，以及scroll-view不触发页面滚动和下拉刷新的特性。对于前端下拉刷新，建议采用基于wxs的方案以提高性能。此外，还提及了如何通过css自定义scroll-view的滚动条样式。

摘要由CSDN通过智能技术生成

使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height。
scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。
scroll-into-view 的优先级高于 scroll-top
scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变
如必需使用前端下拉刷新，推荐使用基于wxs的下拉刷新，性能会比基于js监听方式更高
scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条。（app-nvue无此css）

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件</