小程序遮罩层禁止页面滚动(遮罩层内部可以滚动)

wxml
//使用scroll-view包裹 scrolly-y要写
[scroll-view scroll-y class="mask-box" catchtouchmove=‘ture‘]
[view class="box"]
[view]
[scroll-view]
wxss //样式
.mask-box{
width: 300rpx;
height: 300rpx;
position: fixed;
top: 50%;
left: 50%;
margin-top: -250rpx;
margin-left: -130rpx;
background: pink;
}
//可以滚动
.box{
width: 100%;
height: 600rpx;
}

原文地址:https://www.cnblogs.com/a-pupil/p/12106548.html

时间: 2024-10-14 06:24:25

小程序遮罩层禁止页面滚动(遮罩层内部可以滚动)的相关文章

小程序-web-view嵌入H5页面遇到的bug

遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式----body:{position:fixed;top:0;left:0;width:100%;}    //亲测有效 遇到的问题2:在ios中若是存在多个H5页面跳转,页面会出现这种情况,黄色圈起的部分优势小程序全套的H5页面,此时进行了2个页面的跳转,但是在第二个H5页面,手指触屏左到有拖动时,会同

如何使用微信小程序开发一个弹窗页面(附源码)

在小程序的开发过程中,我们肯定会遇到开发一个弹窗页面的情况,我们先看一下小程序官方对于弹窗页面的解释.API的接口如下 从官方给出的代码示例来看,想当简单,就像一个asert,并不能看出弹窗的真实需求.所以今天HTML51.COM就写了一个弹窗小程序教程,供大家学习参考.首页我们先看一下动态的效果图: 我们首先看到的是首页代码: <view class="copyright"> <view class="copyright_item">Cop

转载【小程序】: 微信小程序开发---应用与页面的生命周期

App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow onHide Function 生命周期函数--监听小程序隐藏 当小程序

微信小程序开发教程(九)视图层——.wxss详解

WXSS是一套样式语言,用于描述WXML的组件样式. 官方文档表示,WXSS的选择器目前支持(".class"."#id"."elemnt"."element,element"."::after"."::before"),而且本地资源无法通过WXSS获取,所以WXSS中的样式都是用的网络图片,或者base64. 好在微信团队提供的WXSS具有CSS大部分特性.同时为了更适合开发微信小程序

微信小程序开发教程(八)视图层——.wxml详解

框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合. 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接受视图层的事件反馈. ? .wxml文件用于描述页面的结构. ? .wxss文件用于描述页面的样式. 视图层以给定的样式展现数据并将时间反馈给逻辑层,而数据展现是以组件来进行的.组件(Component)是视图的基本单

微信小程序开发07-列表页面怎么做

接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有70%以上,如果再花一两天时间,便能跟之前工作做的差不多了,今天我们继续实现一个页面列表,便结束这次的学习,后面几天要出差,所以总结性的文章本周未必能出来,静待下周吧. 这里考虑demo复杂度,列表页功能完成度也仅仅完成主功能模块,与真实工作完成度对比60%左右吧,于是我们开始愉快的代码,首先是将我们

MFC小程序003------MFC使用WebBrowser组件,在对话框中创建滚动视图,动态创建一个静态文本控件并设置鼠标单击的消息响应

MFC小程序截图: 一.在MFC中简单使用WebBrowser的ActiveX插件的方法: 见博文:  http://blog.csdn.net/supermanking/article/details/5866213 二.在对话框中创建视图(我这里创建的是一个滚动视图): 见博文: http://blog.csdn.net/clever101/article/details/4873994 http://blog.csdn.net/clever101/article/details/37790

小程序--改变子级别页面导航栏信息 / navigationBarTitleText

微信小程序在公共文件app.json中设置了导航栏相关样式如下: 其中  navigationBarTitleText 为设置导航栏名称,若是想子级页面和父页面的header页面不同,则在子级文件中新建一个配置文件.json 中配置 { "navigationBarTitleText": "新闻页面"} 这样在进入子级文件中便可以引用自身json文件的导航栏标题了

基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)

高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城 功能和数据库参考ecshop 服务端api基于Node.js+ThinkJS+MySQL 计划添加基于Vue.js的后台管理系统.PC版.Wap版 GitHub: https://github.com/tumobi/nideshop-mini-program 项目截图 首页 专题 分类 商品列表 商品详情 购物车 订单中心 功能列表 首页 分类首页.分类商品.新品首发.

微信小程序内联h5页面,实现分享

在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件 <web-view wx:if="{{h5url}}" src="{{h5url}}" bindmessage="h5PostMessage" ></web-view> 需要bindmessage事件和postMessage方法 bindmessage:网页