WeChat アプレットのページスクロール浸透の問題を解決する

まずスクロールペネトレーションとは何かについて説明しましょう。長いリストがあり、上下にスクロールしてさらに多くのコンテンツを表示できるとします。削除ボタンをクリックすると、確認ボックスが表示されます。ページを上下にスライドすると、以下に示すように、ポップアップ ボックスの下のリストの内容は引き続き上下にスクロールできることがわかります。

ここに画像の説明を挿入

ビデオ_2022-12-02_111109

この種のエクスペリエンス効果はあまり良くありません。ポップアップ ボックスが表示されると、一番下のリスト ページがスクロールできなくなるのは当然です。この問題を解決するには、実際には次のコードを追加するのが非常に簡単です。対応するページ
**wxml文件的首行**

<!-- page-meta 只能是页面内的第一个节点 -->
<page-meta page-style="{
     
     { show ? 'overflow: hidden;' : '' }}" />

ブレットボックスが表示されている場合は show を true に設定するとスクロールの侵入を禁止します ブレットボックスが閉じている場合は show を false に設定するとページのスクロールが可能になります

Page({
    
    
	 data: {
    
    
		show: false
	},
	// 弹框打开禁止页面滚动穿透
	handleDialogOpen() {
    
    
	    this.setData({
    
    
	      show: true
	    })
	 }// 弹框关闭允许页面滚动
	 handleDialogClose() {
    
    
	    this.setData({
    
    
	      show: false
	    })
	  }
})

O了,就这么点代码,亲身试验有效!如果能解决你的问题还望点个赞哦,祝你生活愉快!

おすすめ

転載: blog.csdn.net/m0_37873510/article/details/128144749