uniapp移动端开发使用弹出层滚动报错解决

uniapp移动端开发使用弹出层滚动报错解决，首先上报错！

这段报错是说有一项干预，已忽略取消带有Cancelable=False的TouchMove事件的尝试，例如，因为滚动正在进行且无法中断。

为什么要解决？

正式项目上线以后UI设计的图，边距上下左右距离都是精心计算的，既美观又时尚，不能因为你的弹出层问题，导致用户在滑动的时候，样式固定卡死而影响体验！

<template>
	<u-popup v-model="show">
		<view>出淤泥而不染，濯清涟而不妖</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>
// uview官方给的模板，但肯定不是我们想要的那一种 下面是更改过后的
<template>
	<u-popup v-model="show">
		<view class="header">
            <view>内容标签</view>
            <view>x</view>  
        </view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

加一点点css，展示效果图

 如果数据过少的时候，在滑动的时候就会出现上面的报错，怎么办呢？很简单

给里面内容模块包裹在一个父元素里面，设置定位，上代码

// 方便演示 直接就是行内样式了 还有一些设置的样式在style里，各位老爷在粘贴的时候记得删除custorm或者自行加样式，这里就不多做演示了
<u-popup v-model="demo" mode="bottom" border-radius="8" length="50%">
            // 整体大盒子设置相对定位
			<view style="position: relative;">
                // 头部展示设置头部的固定定位
				<view class="custorm" style="position: fixed; top: 0; left: 0; right: 0;">
					<view>内容模块</view>
					<view>x</view>
				</view>
                // 因为固定定位脱离了标准流，所以在下面在设置一个重叠的盒子，给隐藏掉
				<view class="custorm" style="opacity: 0;">
					<view>隐藏模块</view>
					<view>隐藏模块</view>
				</view>
                // 这样在滑动的时候头部的为止数据进入的时候就会被隐藏
				<view class="line"></view>
				<view class="custorm_text">1</view>
				<view class="line_cencle"></view>
				<view class="custorm_text">2</view>
				<view class="line"></view>
				<view class="custorm_text">3</view>
				<view class="line_cencle"></view>
				<view class="custorm_text">4</view>
				<view class="line"></view>
				<view class="custorm_text">5</view>
				<view class="line_cencle"></view>
				<view class="custorm_text">6</view>
				<view class="line"></view>
				<view class="custorm_text">7</view>
				<view class="line_cencle"></view>
				<view class="custorm_text">8</view>
				<view class="line"></view>
				<view class="custorm_text">9</view>
				<view class="line_cencle"></view>
				<view class="custorm_text">10</view>
                // 底部设置这个纯粹是因为样式不好看，加一个这个通过高度调节最后一个元素距离底部的距离，从而跟上面的上下距离保持一致
				<view class="custorm" style="opacity: 0;height: 1rpx;">
					<view>隐藏模块</view>
					<view>隐藏模块</view>
				</view>
			</view>
		</u-popup>

这样设置过后既美观，又不会报错，还不辜负UI的一片苦心！