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