全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[松原seo公司便捷久澳]小程序显示弹窗时禁止下层的内容滚动的两种方法介绍

  本篇文章给大家带来的内容是关于小程序显示弹窗时禁止下层的内容滚动的两种方法介绍▷▷▲,有一定的参考价值,益阳市小程序开发哪家好有需要的朋友可以参考一下,[松原seo公司便捷久澳]希望对你有所帮助。

  ① 第一种方式
利用position:fixed. 禁止页面滚动☆◆.

  一▽●▲▼. 页面结构html

  

<view class="◇◁▪;indexPage {{proInfoWindow?'indexFixed':'▲•◁▷;'}}">
-----------此处为整个页面的结构内容
<…□■▼;button catchTap="☆●●;_proInfoWindowShow"▷☆◁;>点击显示弹窗<▼=;/button>
</view>
// 当proInfoWindow为true的时候显示弹窗
<view wx:if="…☆;{{proInfoWindow}}">此处为弹窗内容</view>

 

  二□▽…=. CSS部分

  

//添加一个类名, 把弹窗的下层内容定位为fixed▷▲▽▷.实现禁止滚动的效果
.indexFixed{
 position: fixed;
 top●…△▷:0○…;//top▷▲■◆:0可不写,否则显示弹窗的同时会使底层滚动到顶部.
 left:0▽☆□△;
 bottom:0;
 right••☆●:0◁◆…;
}

 

  三. JS部分
 

  

Page({
 data: {
proInfoWindow:false,//控制弹窗是否显示 
},
// 点击弹窗事件, 设置proInfoWindow为true▪☆◁◇, 显示弹窗.
// 设置proInfoWindow为true的同时, 给页面添加了一个class名为indexFixed的类.显示弹窗时下层就禁止滚动,关掉弹窗时就可以滚动◆■.
_proInfoWindowShow(){
 this.setData({
 proInfoWindow:true
})
}
})

 

  ②第二种方式

  

用 catchtouchmove="return"□•○=;
//此处为弹窗内容
<view catchtouchmove="return"> //外层加 catchtouchmove="return"…●;仅触摸背景区域时不穿透底部.
<view catchtouchmove="return">●▪◆-;</view> //在每个小的区域内加 catchtouchmove="return"
<view> // 有需要滚动的列表区域位置不要加 catchtouchmove="return", 否则列表无法滚动
 <view>滚动列表1</view>★△●;
 <●•;view>△•▪●;滚动列表2</view>
 <view>……☆;滚动列表3<◁…-▪;/view>
 <view>滚动列表4<○▷■;/view>
<-▪▼;/view>
</view>☆…;

 

  以上就是小程序显示弹窗时禁止下层的内容滚动的两种方法介绍的详细内容,绥化市小程序制作公司更多请关注久澳传媒编程栏目其它相关文章!威海市小程序开发哪家好Bootstrap教程

[松原seo公司便捷久澳]小程序显示弹窗时禁止下层的内容滚动的两种方法介绍

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。