小程序顯示彈窗時禁止下層的內容滾動

ddongjian0000 發布于2019-08-30 15:56 / 1235人閱讀

摘要：小程序顯示彈窗時禁止下層的內容滾動小程序顯示彈窗時禁止下層的內容滾動第一種方式利用禁止頁面滾動一頁面結構此處為整個頁面的結構內容點擊顯示彈窗當為的時候顯示彈窗此處為彈窗內容二部分添加一個類名把彈窗的下層內容定位為實現禁

小程序顯示彈窗時禁止下層的內容滾動

① 第一種方式
利用position:fixed. 禁止頁面滾動.

一. 頁面結構html

-----------此處為整個頁面的結構內容

// 當proInfoWindow為true的時候顯示彈窗
此處為彈窗內容
二. CSS部分

//添加一個類名, 把彈窗的下層內容定位為fixed.實現禁止滾動的效果
.indexFixed{
position: fixed;
top:0;//top:0可不寫,否則顯示彈窗的同時會使底層滾動到頂部.
left:0;
bottom:0;
right:0;
}
三. JS部分

Page({
data: {

proInfoWindow:false,//控制彈窗是否顯示

// 點擊彈窗事件, 設置proInfoWindow為true, 顯示彈窗.
// 設置proInfoWindow為true的同時, 給頁面添加了一個class名為indexFixed的類.顯示彈窗時下層就禁止滾動,關掉彈窗時就可以滾動.

_proInfoWindowShow(){

  this.setData({
    proInfoWindow:true
})

}
})

②第二種方式

用 catchtouchmove="return"

//此處為彈窗內容
//外層加 catchtouchmove="return"僅觸摸背景區域時不穿透底部.

 //在每個小的區域內加 catchtouchmove="return"
 // 有需要滾動的列表區域位置不要加 catchtouchmove="return", 否則列表無法滾動
    滾動列表1
    滾動列表2
    滾動列表3
    滾動列表4

GPU云服務器云服務器彈窗時彈窗時不小程序滾動到圖片js 小程序內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117563.html

小程序顯示彈窗時禁止下層的內容滾動

摘要：小程序顯示彈窗時禁止下層的內容滾動小程序顯示彈窗時禁止下層的內容滾動第一種方式利用禁止頁面滾動一頁面結構此處為整個頁面的結構內容點擊顯示彈窗當為的時候顯示彈窗此處為彈窗內容二部分添加一個類名把彈窗的下層內容定位為實現禁小程序顯示彈窗時禁止下層的內容滾動小程序顯示彈窗時禁止下層的內容滾動 ① 第一種方式利用position:fixed. 禁止頁面滾動. 一. 頁面結構html ...

snifes 2019-08-23 16:07 評論0 收藏0
跳出彈窗頁面禁止滾動（PC端和手機端）

摘要：端如何實現當彈窗顯示時，為元素添加屬性當關閉彈窗時移除該屬性即可在彈窗的上設置你要顯示的內容出現彈窗時，為元素添加，這樣主頁面就禁止滑動，同時很好地解決了彈窗穿透的問題。由于無法取消，因此事件監聽器無法阻止頁面呈現。 pc端如何實現 1.當彈窗顯示時，為body元素添加屬性：overflow：hidden, 當關閉彈窗時移除該屬性即可2.在彈窗的div上設置 @scroll.sto...

HmyBmny 2019-08-23 13:49 評論0 收藏0
跳出彈窗頁面禁止滾動（PC端和手機端）

摘要：端如何實現當彈窗顯示時，為元素添加屬性當關閉彈窗時移除該屬性即可在彈窗的上設置你要顯示的內容出現彈窗時，為元素添加，這樣主頁面就禁止滑動，同時很好地解決了彈窗穿透的問題。由于無法取消，因此事件監聽器無法阻止頁面呈現。 pc端如何實現 1.當彈窗顯示時，為body元素添加屬性：overflow：hidden, 當關閉彈窗時移除該屬性即可2.在彈窗的div上設置 @scroll.sto...

atinosun 2019-08-29 17:26 評論0 收藏0