微信小程序實現彈出層禁止頁面滾動
更新時間：2022年07月07日 07:42:37 作者：換日線°
這篇文章主要為大家詳細介紹了微信小程序實現彈出層禁止頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現彈出層禁止頁面滾動的具體代碼，供大家參考，具體內容如下
效果圖
是否隨頁面滾動 catchtouchmove true開啟 return關閉
.wxml
<button bindtap="switch">上下滑動({{catchtouchmove?'開':'關'}})</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
? ? })
? },
})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要對Javascript的外部對象進行介紹，列舉了具體實例。便于理解。有需要的朋友可以看下2016-12-12
這篇文章介紹了ECharts事件處理與實現旭日圖的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了js中的原型，原型對象，原型鏈的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要幫助大家理解Javascript文件動態(tài)加載，解決了Javascript文件動態(tài)加載時出現的錯誤，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要給大家介紹了關于js將圖片轉base64的兩種實現方法,Base64是網絡上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個可打印字符來表示二進制數據的方法,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了javascript基本的知識點，包括字符串、特殊字符運算、變量轉字符串等，對javascript的基礎知識講解的很全面，為了更好地幫助大家學習javascript，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細介紹了JavaScript實現全選取消效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
彈窗居中比較煩人的是怎么才能在任意分辨率下實現居中顯示，為了解決此問題，本文測試了一下案例在此與大家分享，有類似需求的朋友可以學習下2013-08-08
javascript讀取xml...2006-11-11
這篇文章主要為大家詳細介紹了JavaScript實現打地鼠游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10