前端项目区域滚动组件之scroll-view

常用属性简介

属性名	类型	默认值	简介
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件

简单易懂的使用方式
这里是uniapp项目 移动端的区域滚动示例

	<!--滚动-->
	<scroll-view
		:scroll-y="true"
		class="dataScroll"
		:scroll-top="scrollTop"
		@scroll="scroll"
		@scrolltolower="loadMore()">
		<!--数据展示-->
		<view class="dataShow">
		</view>
	</scroll-view>

js

<script>
	export default {
		name:'index',
		data() {
			return {
				scrollTop: 0, // 切换是文章列表滚动到顶部
				old: {
				  scrollTop: 0,
				},
			}
		},
		methods: {
			// 监听内容滚动
			scroll: function (e) {
		  		this.old.scrollTop = e.detail.scrollTop; // 必要
		  		if (e.detail.scrollTop < 0) {
		    		uni.pageScrollTo({
		      			scrollTop: 0,
		      			duration: 100,
		    		});
		  		}
			},
			//触底函数 没有实际操作
			loadMore(){
				
			},
		}
	}
</script>

内容超过外层scroll的高度就会出现滚动

<style lang="scss" scoped>
.dataScroll{
	width:100%;
	height:500rpx;
	box-sizing: border-box;
	.dataShow{
		width:100%;
		height:600rpx;
	}
}
</style>

其他参数详情 请参考文档
scroll-view(点击跳转)