微信小程序?qū)崿F(xiàn)彈出層禁止頁面滾動
更新時間：2022年07月07日 07:42:37 作者：換日線°
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出層禁止頁面滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)彈出層禁止頁面滾動的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
是否隨頁面滾動 catchtouchmove true開啟 return關(guān)閉
.wxml
<button bindtap="switch">上下滑動({{catchtouchmove?'開':'關(guān)'}})</button>
<button bindtap="modal">彈出層</button>
<view bindtap="modal" class="modal" wx:if="{{modalName}}" catchtouchmove="{{catchtouchmove?true:return}}">
? <view></view>
</view>.wxss
page{
? height: 160vh;
}
.modal{
? width: 100%;
? height: 100vh;
? background: rgba(0, 0, 0, 0.6);
? position: fixed;
? top: 0;
? left: 0;
? z-index: 10;
? display: flex;
? justify-content: center;
? align-items: center;
}
.modal>view{
? width: 70%;
? height: 500rpx;
? background-color: #fff;
}.js
Page({
? data: {
? ? catchtouchmove:false,
? ? modalName:false,
? },
? switch(){
? ? this.setData({
? ? ? catchtouchmove:!this.data.catchtouchmove
? ? })
? },
? modal(){
? ? this.setData({
? ? ? modalName:!this.data.modalName
? ? })
? },
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要對Javascript的外部對象進(jìn)行介紹，列舉了具體實例。便于理解。有需要的朋友可以看下2016-12-12
這篇文章介紹了ECharts事件處理與實現(xiàn)旭日圖的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了js中的原型，原型對象，原型鏈的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要幫助大家理解Javascript文件動態(tài)加載，解決了Javascript文件動態(tài)加載時出現(xiàn)的錯誤，感興趣的小伙伴們可以參考一下2016-01-01
js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法,Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個可打印字符來表示二進(jìn)制數(shù)據(jù)的方法,需要的朋友可以參考下2023-07-07
每天一篇javascript學(xué)習(xí)小結(jié)（基礎(chǔ)知識）
這篇文章主要介紹了javascript基本的知識點(diǎn)，包括字符串、特殊字符運(yùn)算、變量轉(zhuǎn)字符串等，對javascript的基礎(chǔ)知識講解的很全面，為了更好地幫助大家學(xué)習(xí)javascript，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)全選取消效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
彈窗居中比較煩人的是怎么才能在任意分辨率下實現(xiàn)居中顯示，為了解決此問題，本文測試了一下案例在此與大家分享，有類似需求的朋友可以學(xué)習(xí)下2013-08-08
javascript讀取xml...2006-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10