前端项目区域滚动组件之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的高度就会出现滚动

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