uniapp scroll-view基础用法和示例

前言

在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

纵向滚动

将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能，给scroll-view设置一个高度，当内容高度大于scroll-view高度时即可开启滚动功能（内容高度小于scroll-view高度时无法体现滚动功能）

实现代码：

效果图：

横向滚动

将scroll-view组件中的属性scroll-x设定为true开启横向滚动功能，给scroll-view设置一个宽度，当内容宽度大于scroll-view宽度时即可开启滚动功能（内容宽度小于scroll-view宽度时无法体现滚动功能）

注意：scroll-view本身的display:flex不生效、如果想实现display：flex功能，则可以给scroll-view加上white-space: nowrap，给内容容器加上display:inline-block

实现代码：

效果图：

锚点定位

当我们已进入页面就需要滚动到某一个元素的时候，锚点定位就可以很好的帮助我们定位并滚动到指定位置

将scroll-with-animation设定为true开启动画效果、对scroll-into-view进行动态绑定

注意：scroll-into-view绑定的值得是字符串，使用其他类型则会报错

实现代码：

效果图：

触底事件

在滑动的数据需要懒加载的时候，我们就需要通过用户滑动到底部时触发懒加载方法，通过绑定scrolltolower方法即可实现纵/横触底时触发懒加载方法

实现代码：

效果图：

下拉刷新事件

scroll-view组件也可以满足我们下拉刷新的需求、首先通过设置refresher-enabled为true开启下拉加载、动态绑定refresher-triggered对下拉加载的状态进行控制、绑定refresherrefresh触发下拉刷新事件

实现代码：

效果图：

总结

以上就是我整理的scroll-view的基础用法、想要了解更多的用法可以前往uniapp scroll-view部分进行了解

到此这篇关于uniapp scroll-view基础用法和示例的文章就介绍到这了,更多相关uniapp scroll-view用法内容请搜索0133技术站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持0133技术站！