uniapp弹窗踩坑

问题描述

问题一

点击立即购买会弹出购买商品弹窗，滑动弹窗到底部之后，后面背景的滚动条

解决方式

如果弹窗展示则在最外层添加tl-show

// 最外层元素
<view
	class="member-save-up"
	:class="buyModal ? 'tl-show' : ''"
	id="memberSaveUp"
>
</view>

// 弹窗
<view class="modal-bg" v-if="buyModal" v-show="!productDescModal">

// 设置后面禁止滚动的样式
.tl-show {
	position: fixed;
	    left: 0;
	     100%;
}

问题二

最外层使用fixed之后，默认会将浏览器滚动到顶部

解决方式

使用fixed布局之后，可以获取当前位置距离网页顶部距离，然后通过设置top值进行一个定位就能达到保留当前位置的功能

// 获取当前滚动的距离
onPageScroll(e) {
	if (e.scrollTop) {
		this.pageScrollTop = e.scrollTop;
	}
},
// 设置外层
<view
	class="member-save-up"
	:class="buyModal ? 'tl-show' : ''"
	id="memberSaveUp"
	:style="{
		top: `-${pageScrollTop * 2}rpx`
	}"
>
</view>

问题三

关闭弹窗之后，清除了fixed布局，页面还是会滚动到最顶部

解决方式

因为之前记录了网页顶部距离，可以在弹窗关闭之后，重新设置网页顶部距到刚才的位置就能到到效果，但是需要设置延时(不清楚具体的原理，怀疑是uniapp设置this的机制问题)，会造成页面有一瞬间的闪现（从顶部到当前位置）

this.buyModal=false;
setTimeout(()=>{
    uni.pageScrollTo({
    	duration: 0,
    	scrollTop: this.pageScrollTop // number number number！
    });
});

问题四

页面一瞬间的闪现

解决方式

通过直接操作dom的方式清除tl-show，而不是通过uniapp的数据判断，新增删除tl-show

// 获取dom元素
const query = uni.createSelectorQuery().in(this);
query.select('#memberSaveUp').boundingClientRect(data => {
	console.log(data)
}).exec();
this.memberSaveUpDom = query._component.$el;

// 监听弹窗关闭
watch: {
	buyModal(newVal, oldVal) {
		if (!newVal) {
		    // 清除tl-show
			this.memberSaveUpDom.setAttribute("class", 'member-save-up')
			uni.pageScrollTo({
				duration: 0,
				scrollTop: this.pageScrollTop // number number number！
			});
			// window.scrollTo(0, this.pageScrollTop);
		}
	},
},

问题五

部分手机已经实现了弹窗之后，后面元素不能滚动，并且关闭弹窗，还是保留之前的位置，但是部分手机触摸弹窗还是会发生后面的背景滚动到最顶部的问题

解决方式

控制弹窗阻止向上冒泡，就不会造成部分手机还能滚动到顶部的问题

<view class="modal-bg" v-if="buyModal" v-show="!productDescModal" @touchmove.stop.prevent="disabledScroll">
</view>

disabledScroll() {
	return
},

问题六

当前弹窗的所有滚动事件都被自己禁止了，发现里面有部分动态加载数据需要滚动的地方也不能滚动了

解决方式

只禁用不需要滚动位置的元素

<view class="h3" @touchmove.stop.prevent="disabledScroll">
</view>
<view class="price-title" v-if="buyType === 'buy'" @touchmove.stop.prevent="disabledScroll">
	<view class="small-font">￥</view>
	<view class="big-font">{{ buyDetail.price }}</view>
</view>

至此，弹窗问题已经解决了大部分，能够基本满足页面需求，多个手机做了测试，暂无发现明显问题