uniapp弹出层使用scroll-view进行内容滚动+锚点定位滑动到最底部，解决弹出层滚动穿透_u-view进去直接在底部

前言

本文使用的相关技术及组件为uniapp+uview，使用hbuilder运行在小程序也同样生效。

一、定义template模板

<template>
	<view class="project_data" @touchmove.stop.prevent="disabledScroll">
		<u-button type="primary" class="openPop" @click="openPop">打开弹出框</u-button>
		<!-- 切换项目弹出层 -->
		<u-popup ref="popup" :show="change_pop_show" width="500rpx" height="600rpx" mode="bottom" border-radius="20">
			<view class="project_name_wrapper">
				<scroll-view :scroll-into-view="toView" scroll-y="true" style="height: 480rpx;" scroll-with-animation="true">
					<view v-for="(item,index) in list" :id="item" class="test">
					  {{item}}
					</view>
				</scroll-view>
			</view>
			<view class="btn_container">
				<u-button type="primary" class="btn" @click="addElement">增加元素</u-button>
				<u-button type="primary" class="btn" @click="closePopup">关闭弹框</u-button>
				
				<!-- <u-button type="primary" class="btn" @click="backTop">回到顶部</u-button> -->
			</view>
		</u-popup>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

scroll-into-view值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素，还需要将scroll-y设为true

在弹出层使用scroll-view就能达到内容超出可以滚动的效果。

二、解决弹出层的滚动穿透

在最大的容器中定义一个方法，当弹出框打开时，禁止滚动

disabledScroll(){
	if(this.change_pop_show){
		return
	}
}
1
2
3
4
5

三、定义数据

data() {
	return {
		// 弹出层显示隐藏
		change_pop_show: false,
		// 展示的数据
		list: ["list0", "list1", "list2","list3","list4","list5","list6","list7"],
		// 锚点标记
		toView: '',
		// 额外功能，回到顶部
		scrollTop: 0,
		old: {
			scrollTop: 0
		}
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四、相关方法

// 打开弹出层
openPop(){
	this.change_pop_show = true;
	// 弹出层内容自动在最底部
	// this.toView = this.list[this.list.length-1]
	// 弹出层内容自动在最顶部
	this.toView = this.list[0]
},
closePopup(){
	this.change_pop_show = false;
	this.old.scrollTop = 0;
},
// 增加元素
addElement(){
	// 添加元素
	this.list.push('list'+this.list.length)
	// uniapp需要设置定时器才能实现自动滑动到最底层的效果，如果是开发小程序则不需要使用定时器
	setTimeout(()=>{	
		this.toView = this.list[this.list.length-1]
	},100)
},
// 额外功能，回到顶部
scroll(e) {
	this.old.scrollTop = e.detail.scrollTop	
},
// 回到顶部事件
backTop(){
	this.scrollTop = this.old.scrollTop
	this.$nextTick(()=>{
		this.scrollTop = 0
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

五、简单样式

.project_data{
	width: 100%;
	height: 2000rpx;
	overflow-x:hidden;
	position: relative;
	.openPop{
		margin: 1000rpx 0;
	}
	.project_name_wrapper{
		.test{
			height: 60rpx;
			background-color: #E06C75;
			margin-bottom: 20rpx;
		}
	}
	.btn_container{
		height: 20%;
		width: 100%;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		/deep/ .u-button{
			width: 40%;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27