位置: IT常识 - 正文
uniapp scroll-view基础用法
编辑：rootadmin推荐整理分享uniapp scroll-view基础用法，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。
纵向滚动将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能，给scroll-view设置一个高度，当内容高度大于scroll-view高度时即可开启滚动功能（内容高度小于scroll-view高度时无法体现滚动功能）
实现代码：
<template><view><scroll-view scroll-y="true" style="height: 700rpx;"><view v-for="(item,index) in 3" style="height: 500rpx;" :style="{ backgroundColor: colorList[index]}">{{index}}</view></scroll-view></view></template><script>export default {data() {return {colorList:["blue","red","yellow"]}},methods: {}}</script><style></style>效果图：
横向滚动将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
实现代码：
<template><view><scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;"><view v-for="(item,index) in 3" style="height: 500rpx;width: 100%;display: inline-block;" :style="{ backgroundColor: colorList[index]}">{{index}}</view></scroll-view></view></template><script>export default {data() {return {colorList:["blue","red","yellow"]}},methods: {}}</script><style></style>效果图：
锚点定位
当我们已进入页面就需要滚动到某一个元素的时候，锚点定位就可以很好的帮助我们定位并滚动到指定位置
将scroll-with-animation设定为true开启动画效果、对scroll-into-view进行动态绑定
注意：scroll-into-view绑定的值得是字符串，使用其他类型则会报错
实现代码：
<template><view><scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" scroll-with-animation="true" :scroll-into-view="'scroll'+scrollId"><view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}" :id="'scroll'+index">{{index}}</view></scroll-view></view></template><script>export default {data() {return {colorList:["blue","red","yellow"],scrollId:1}},methods: {}}</script><style></style>效果图：
触底事件在滑动的数据需要懒加载的时候，我们就需要通过用户滑动到底部时触发懒加载方法，通过绑定scrolltolower方法即可实现纵/横触底时触发懒加载方法
实现代码：
<template><view><scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" @scrolltolower="onReachScollBottom"><view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}">{{index}}</view></scroll-view></view></template><script>export default {data() {return {colorList:["blue","red","yellow"],}},methods: {onReachScollBottom(){uni.showToast({title:"触发了触底事件",duration:1500,icon:"none"})}}}</script><style></style>效果图：
下拉刷新事件scroll-view组件也可以满足我们下拉刷新的需求、首先通过设置refresher-enabled为true开启下拉加载、动态绑定refresher-triggered对下拉加载的状态进行控制、绑定refresherrefresh触发下拉刷新事件
实现代码：
<template><view><scroll-view scroll-x="true" style="height: 500rpx;white-space: nowrap;" refresher-enabled="true" :refresher-triggered="refresh" @refresherrefresh="onRefresh"><view v-for="(item,index) in 3" style="height: 500rpx;width: 80%;display: inline-block;" :style="{ backgroundColor: colorList[index]}">{{index}}</view></scroll-view></view></template><script>export default {data() {return {colorList:["blue","red","yellow"],refresh: false}},methods: {onRefresh() {this.refresh= true;uni.showToast({title:"触发了下拉刷新",duration:1500,icon:"none"})// 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况setTimeout(() => {this.refresh = false;}, 500)}}}</script><style></style>效果图：
总结以上就是我整理的scroll-view的基础用法、想要了解更多的用法可以前往uniapp scroll-view部分进行了解
上一篇：controller层，service层，mapper层，entity层的作用与联系。(controller层,service层,dao)
下一篇：和月薪5W的阿里程序员聊过后，才知道自己一直在打杂...(阿里月薪3万到手多少)
