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;
	    width: 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>

至此，彈窗問題已經解決了大部分，能夠基本滿足頁面需求，多個手機做了測試，暫無發現明顯問題