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

前言

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

一、定义template模板

<template>
	<view :class="change_pop_show ? 'project_data scroll-lock' : 'project_data'">
		<u-button type="primary" @click="openPop">打开弹出框u-button>
		
		<u-popup ref="popup" v-model="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>
			view>
		u-popup>
	view>
template>

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

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

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

大家可以看到我在最大的view标签上动态绑定一个类scroll-lock，是根据弹出框显隐控制的，这就是第一个问题，弹出层滚动穿透问题。

在页面中如果高度过高，出现了滚动条，这时候设置了弹出层，在弹出层内滚动就会造成页面同时滚动，一般叫做滚动穿透。

解决方法就是在弹出层出现后设置这样的样式就可以解决了。(适用于微信小程序)

.scroll-lock{
      
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 99; 
  width: 100%; 
  height: 100%; 
}

三、定义数据

data() {
     
	return {
     
		// 弹出层显示隐藏
		change_pop_show: false,
		// 展示的数据
		list: ["list0", "list1", "list2","list3","list4","list5","list6","list7"],
		// 锚点标记
		toView: ''
	}
},

四、相关方法

// 打开弹出层
openPop(){
     
	this.change_pop_show = true
},
// 增加元素
addElement(){
     
	// 添加元素
	this.list.push('list'+this.list.length)
	// uniapp需要设置定时器才能实现自动滑动到最底层的效果，如果是开发小程序则不需要使用定时器
	setTimeout(()=>{
     	
		this.toView = this.list[this.list.length-1]
	},100)
},

五、简单样式

.project_data{
     
	width: 100%;
	height: 2000rpx;
	overflow-x:hidden;
	position: relative;
	.openPop{
     
		margin-top: 100rpx;
	}
	.project_name_wrapper{
     
		.test{
     
			height: 60rpx;
			background-color: #E06C75;
			margin-bottom: 20rpx;
		}
		.btn_container{
     
			height: 20%;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
}