小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法
更新時間：2019年03月20日 15:37:27 作者：Sophia0326
這篇文章主要介紹了小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
小程序顯示彈窗時禁止下層的內(nèi)容滾動實現(xiàn)方法，具體如下
① 第一種方式
利用position:fixed. 禁止頁面滾動.
一. 頁面結(jié)構(gòu)html
<view class="indexPage {{proInfoWindow?'indexFixed':''}}">
-----------此處為整個頁面的結(jié)構(gòu)內(nèi)容
<button catchTap="_proInfoWindowShow">點(diǎn)擊顯示彈窗</button>
</view>
// 當(dāng)proInfoWindow為true的時候顯示彈窗
<view wx:if="{{proInfoWindow}}">此處為彈窗內(nèi)容</view>
二. 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,//控制彈窗是否顯示
},
// 點(diǎn)擊彈窗事件, 設(shè)置proInfoWindow為true, 顯示彈窗.
// 設(shè)置proInfoWindow為true的同時, 給頁面添加了一個class名為indexFixed的類.顯示彈窗時下層就禁止?jié)L動,關(guān)掉彈窗時就可以滾動.
_proInfoWindowShow(){
this.setData({
proInfoWindow:true
})
}
})
②第二種方式
用 catchtouchmove="return"
//此處為彈窗內(nèi)容
<view catchtouchmove="return"> //外層加 catchtouchmove="return"僅觸摸背景區(qū)域時不穿透底部.
<view catchtouchmove="return"></view> //在每個小的區(qū)域內(nèi)加 catchtouchmove="return"
<view> // 有需要滾動的列表區(qū)域位置不要加 catchtouchmove="return", 否則列表無法滾動
<view>滾動列表1</view>
<view>滾動列表2</view>
<view>滾動列表3</view>
<view>滾動列表4</view>
</view>
</view>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js定時器(執(zhí)行一次、重復(fù)執(zhí)行)
這篇文章主要分享一段js代碼，有關(guān)js定時器的小例子，分為執(zhí)行一次的定時器與重復(fù)執(zhí)行的定時器,需要的朋友可以參考下2014-03-03
javascript實現(xiàn)網(wǎng)頁字符定位的方法
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁字符定位的方法,實例分析了javascript頁面元素查找與定位的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本篇文章主要介紹了js常用的繼承--組合式繼承的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
帶領(lǐng)大家學(xué)習(xí)javascript基礎(chǔ)篇(一)之基本概念
這篇文章主要介紹了帶領(lǐng)大家學(xué)習(xí)javascript基礎(chǔ)篇(一)之基本概念的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了javascript中使用正則計算中文長度的例子,需要的朋友可以參考下2014-04-04
JavaScript canvas繪制圓形加載進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制圓形加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript模擬實現(xiàn)Promise功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何模擬實現(xiàn)Promise功能，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-12-12
使用JavaScript字符串解決回文數(shù)的方案詳解
這篇文章主要介紹了使用JavaScript字符串解決回文數(shù)的方案,JavaScript中的字符串是一種數(shù)據(jù)類型,用于表示文本數(shù)據(jù),字符串可以包含任意字符序列,包括字母、數(shù)字、符號和空格,靈活掌握字符串的解決問題思想,巧用字符串解決回文數(shù),需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了AjaxUpLoad.js實現(xiàn)文件上傳的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了JS解析XML文件和XML字符串詳解，推薦給大家，有需要的小伙伴可以參考下。2015-04-04