这个时候#xff0c;就可以使用uniapp提供的滚动组件…我们经常需要做页面中部分内容可以滚动的功能例如“猜你喜欢”内容太多通常都会超出屏幕那么此块区域应该可以滚动但是顶部的自定义导航栏应该不能随着滚动。

这个时候就可以使用uniapp提供的滚动组件scroll-view。

一、滚动组件

原生组件。

更新微信基础库2.4.4起支持了原生组件在scroll-view、swiper、movable-view

scroll-view

不适合放长列表有性能问题。

长列表滚动和下拉刷新应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。

包括在app-nvue页面长列表应该使用list而不是scroll-view。

scroll-into-view

scroll-view是区域滚动不会触发页面滚动无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。

scroll-view。

插件市场有前端模拟的基于scroll-view的下拉刷新但性能不佳。

如必需使用前端下拉刷新推荐使用基于wxs的下拉刷新性能会比基于js监听方式更高。

scroll-view的滚动条设置可通过css的-webkit-scrollbar自定义包括隐藏滚动条app-nvue无此css

官方文档

1将需要滚动的内容放入scroll-view组件中并设置竖向滚动scroll-y

templatemy-navbar

scroll-y!--轮播图--my-swipper/!--分类面板--my-category-pannel/!--

/template2设置样式页面高度

scrolltolower并设置ts类型UniHelper.ScrollViewOnScrolltolowerEvent

const

UniHelper.ScrollViewOnScrolltolowerEvent){console.log(到底部了,e);

}4添加猜你喜欢测试组件my-guess

classsmall/texttext6999.00/text/view/navigator/view/view

/templatescript

space-between;background-color:

#efefef;margin:

3、扩展使用ref属性调用子组件my-guess的方法加载更多数据

1在index.vue中定义ref

UniHelper.ScrollViewOnScrolltolowerEvent){console.log(到底部了);guessRef.value?.getMore()

/script2定义组件实例类型

httpPageResultGuessItem({method:

GET,url:

getHomeGuessAPI()guessList.value

res.data.items

defineExpose({getMore:getNextPageGuess

/script