摘要:小程序顯示彈窗時禁止下層的內(nèi)容滾動小程序顯示彈窗時禁止下層的內(nèi)容滾動第一種方式利用禁止頁面滾動一頁面結(jié)構(gòu)此處為整個頁面的結(jié)構(gòu)內(nèi)容點擊顯示彈窗當(dāng)為的時候顯示彈窗此處為彈窗內(nèi)容二部分添加一個類名把彈窗的下層內(nèi)容定位為實現(xiàn)禁
小程序顯示彈窗時禁止下層的內(nèi)容滾動
小程序顯示彈窗時禁止下層的內(nèi)容滾動
① 第一種方式
利用position:fixed. 禁止頁面滾動.
一. 頁面結(jié)構(gòu)html
-----------此處為整個頁面的結(jié)構(gòu)內(nèi)容
// 當(dāng)proInfoWindow為true的時候顯示彈窗
二. CSS部分
//添加一個類名, 把彈窗的下層內(nèi)容定位為fixed.實現(xiàn)禁止?jié)L動的效果
.indexFixed{
position: fixed;
top:0;//top:0可不寫,否則顯示彈窗的同時會使底層滾動到頂部.
left:0;
bottom:0;
right:0;
}
三. JS部分
Page({
data: {
proInfoWindow:false,//控制彈窗是否顯示
},
// 點擊彈窗事件, 設(shè)置proInfoWindow為true, 顯示彈窗. // 設(shè)置proInfoWindow為true的同時, 給頁面添加了一個class名為indexFixed的類.顯示彈窗時下層就禁止?jié)L動,關(guān)掉彈窗時就可以滾動.
_proInfoWindowShow(){
this.setData({ proInfoWindow:true })
}
})
②第二種方式
用 catchtouchmove="return"
//此處為彈窗內(nèi)容
//在每個小的區(qū)域內(nèi)加 catchtouchmove="return" // 有需要滾動的列表區(qū)域位置不要加 catchtouchmove="return", 否則列表無法滾動 滾動列表1 滾動列表2 滾動列表3 滾動列表4
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/102709.html
摘要:小程序顯示彈窗時禁止下層的內(nèi)容滾動小程序顯示彈窗時禁止下層的內(nèi)容滾動第一種方式利用禁止頁面滾動一頁面結(jié)構(gòu)此處為整個頁面的結(jié)構(gòu)內(nèi)容點擊顯示彈窗當(dāng)為的時候顯示彈窗此處為彈窗內(nèi)容二部分添加一個類名把彈窗的下層內(nèi)容定位為實現(xiàn)禁 小程序顯示彈窗時禁止下層的內(nèi)容滾動 小程序顯示彈窗時禁止下層的內(nèi)容滾動 ① 第一種方式利用position:fixed. 禁止頁面滾動. 一. 頁面結(jié)構(gòu)html ...
摘要:端如何實現(xiàn)當(dāng)彈窗顯示時,為元素添加屬性當(dāng)關(guān)閉彈窗時移除該屬性即可在彈窗的上設(shè)置你要顯示的內(nèi)容出現(xiàn)彈窗時,為元素添加,這樣主頁面就禁止滑動,同時很好地解決了彈窗穿透的問題。由于無法取消,因此事件監(jiān)聽器無法阻止頁面呈現(xiàn)。 pc端如何實現(xiàn) 1.當(dāng)彈窗顯示時,為body元素添加屬性:overflow:hidden, 當(dāng)關(guān)閉彈窗時移除該屬性即可2.在彈窗的div上設(shè)置 @scroll.sto...
摘要:端如何實現(xiàn)當(dāng)彈窗顯示時,為元素添加屬性當(dāng)關(guān)閉彈窗時移除該屬性即可在彈窗的上設(shè)置你要顯示的內(nèi)容出現(xiàn)彈窗時,為元素添加,這樣主頁面就禁止滑動,同時很好地解決了彈窗穿透的問題。由于無法取消,因此事件監(jiān)聽器無法阻止頁面呈現(xiàn)。 pc端如何實現(xiàn) 1.當(dāng)彈窗顯示時,為body元素添加屬性:overflow:hidden, 當(dāng)關(guān)閉彈窗時移除該屬性即可2.在彈窗的div上設(shè)置 @scroll.sto...
閱讀 3335·2021-11-22 12:04
閱讀 2719·2019-08-29 13:49
閱讀 491·2019-08-26 13:45
閱讀 2251·2019-08-26 11:56
閱讀 1010·2019-08-26 11:43
閱讀 603·2019-08-26 10:45
閱讀 1277·2019-08-23 16:48
閱讀 2166·2019-08-23 16:07