uniapp-【scroll-view】

• 使用竖向滚动时，需要给 <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 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

 

当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。

1.监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
  <view id="demo1">A</view>
  <view id="demo2">B</view>
  <view id="demo3" >C</view>
</scroll-view>

<view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style>
	.scroll-Y {
		height: 300rpx;
	}
</style>

2.监听scroll事件，获取组件内部变化的值，实时更新其绑定值
注意:在某些组件可能造成抖动，推荐第一种解决方式

<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

<script>
export default {
        data() {
            return {
                scrollTop: 0,
            }
        },
        methods: {
            scroll: function(e) {
                // 如果使用此方法，请自行增加防抖处理
                this.scrollTop = e.detail.scrollTop
            },
            goTop: function(e) {
                this.scrollTop = 0
            }
        }
    }
</script>

<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
	<view id="demo1" class="scroll-view-item_H ">A</view>
	<view id="demo2" class="scroll-view-item_H ">B</view>
	<view id="demo3" class="scroll-view-item_H ">C</view>
</scroll-view>

<style>
.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>