微信小程序實現(xiàn)彈出層禁止頁面滾動
更新時間：2022年07月07日 07:42:37 作者：換日線°
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)彈出層禁止頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)彈出層禁止頁面滾動的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
是否隨頁面滾動 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
? ? })
? },
})以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
一文帶你搞懂JS中導入模塊import和require的區(qū)別
JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個單獨的單元，并且可以在其他代碼中進行導入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別2023-03-03
這篇文章主要介紹了php，js，css字符串截取的辦法，其實沒有什么技術含量，就是記錄一下，方便自己復習鞏固，希望對大家能有所幫助2014-09-09
這篇文章主要為大家詳細介紹了小程序實現(xiàn)帶索引的城市列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了js實現(xiàn)獲取div坐標的方法,通過調用jQuery插件實現(xiàn)獲取div元素坐標的功能,非常簡單實用,需要的朋友可以參考下2015-11-11
這篇文章介紹了JS在Canvas元素內(nèi)繪制鐘表的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
本篇文章主要是對Ajax提交與傳統(tǒng)表單提交的區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
DOM與事件是JavaScript最核心的組成部分之一，他們賦予了頁面無限的想象空間，你根本無法離開他們，否則js將寸步難行。本文給大家分享我對javascript dom事件的了解，對javascript dom事件相關知識感興趣的朋友一起學習吧2015-12-12
這篇文章主要介紹了JS設計模式之策略模式概念與用法,簡單分析了策略模式的基本概念、原理并結合實例形式分析了javascript實現(xiàn)與使用策略模式的相關操作技巧,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了js+canvas繪制五角星的方法,涉及JavaScript調用canvas組件結合數(shù)學運算繪制圖形的相關技巧,需要的朋友可以參考下2016-01-01
js中字符型和數(shù)值型數(shù)字的互相轉化方法(必看)
下面小編就為大家?guī)硪黄猨s中字符型和數(shù)值型數(shù)字的互相轉化方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04