小程序浮层滚动阻止window窗体滚动JS/CSS处理

最新推荐文章于 2024-06-07 15:40:44 发布

余年不负韶华

最新推荐文章于 2024-06-07 15:40:44 发布

阅读量3.6k

点赞数 2

分类专栏：小程序文章标签： javascript 动画 css3

本文链接：https://blog.youkuaiyun.com/kincaid_z/article/details/77882879

版权

小程序专栏收录该内容

6 篇文章

订阅专栏

index.wxml

  <view class="bgCover" catchtouchmove="disMove"></view>

index.wxss

.bgCover{  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
}

index.js

//禁止滑动
  disMove:function(){

  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

余年不负韶华

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Python APP自动化测试框架Appium详解

悦分享

10-24

2832

随着移动互联网的发展，越来越多的App产品应运而生。很多公司除了Web产品外还研发了相应的手机App产品，一些公司的主营业务甚至就是App。测试工程师也需要掌握一定的App端测试技能，从而让自己从烦琐、重复的“点点点”的人工测试中解脱出来，用自动化的“武器”武装自己，以适应新的测试需求。App测试，顾名思义就是针对手机中的App进行的测试工作。需求分析。制定测试计划。设计测试用例。执行测试用例。记录和跟踪bug情况。验收测试。生成测试报告并分析。用户体验分析。

小程序css实现遮罩弹出层

01-20

小程序中用css实现遮罩弹出层

参与评论您还未登录，请先登录后发表或查看评论

微信小程序禁止页面上下滑动的三个方式

小鱼的博客

06-29

3万+

开发的时候，会遇到产品或者UI发出如下规定：1、如果是一屏的页面，就禁止页面能上下滑动2、如果显示弹窗的时候，长屏幕禁止上下滑动！感叹一句：好变态当然，感叹归感叹，但是还是得听不是，我找出了3种方式，看看大家喜欢哪个，就用哪个！第一种方式：页面最外层的盒子，使用绝对定位！这样页面也就不能滑动了！此方法呢，比较麻烦，写的代码比较多！但是还是能够实现的！源码如下：第二种方式：在微信小程序app.json的window中，添加”disableScroll”:true，但是要注意，如果你是要在app.json

小程序弹出层

u011124998的博客

03-06

895

小程序弹出层问题描述：解决方案：问题描述： 小程序多用弹出层！解决方案： WXML <view class="pop pop-{{type}} {{show ? 'pop-show' : ''}}"> <view wx:if="{{overlay}}" class="pop_mask {{showOverlay ? '' : 'pop_mask-hide'}}" bindtap="handleMaskClick"> </view> &l

小程序——左右页面来回滑动

weixin_42388503的博客

09-10

6439

<view class="class_first" bindtouchstart="touchStart" bindtouchend="touchEnd"> 滑动切换页面 </view> .class_first { width: 100%; height: 1334rpx; background-color: red } ...

小程序_底部弹出层

weixin_30387339的博客

08-14

445

wxml： <view bindtap='showModal'>点击弹出</view> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}"...

零基础微信落地页小程序实战项目

Simon的博客

10-09

2047

前言微信小程序简单易上手，只要有一些编程基础，即可快速开发基本的项目。本项目是常见的，商品广告落地页小程序。提供商品浏览，商品列表按钮，购买，微信授权，手机号绑定，验证码校验，用户协议，消息通知，监听者模式等基本功能。定位学习人群是刚接触微信小程序的，零基础同学。本人刚接触微信小程序时，也是零基础，HTML和CSS都是第一次接触，经过两个星期的学习，就掌握了基本的开发技巧，并独立完成多个项目。所以即使没有这方面经验的同学也不要气馁，只要学习几个实战项目之后，应付工作基本上都是绰绰有余的。效果图

一个采用C#+ASP.NET实现的Modal popup window图片模式窗体展示程序代码

01-09

总的来说，这个C#+ASP.NET实现的Modal popup window图片模式窗体展示程序，结合了服务器端的C#处理、客户端的HTML/CSS/JavaScript交互以及ASP.NET的特性，为用户提供了一种高效且直观的图片查看方式。通过学习这个...

query弹出层！父窗体至于不可用状态！很好的例子

09-08

5. **阻止背景交互**：为了使父窗体不可用，可以将背景元素的CSS属性`pointer-events`设置为`none`，这样用户的所有点击事件都不会影响到背景元素。在弹出层关闭时，再将此属性恢复为默认值。 6. **JavaScript和...

微信小程序—页面滑动，获取可视区域数据

weixin_42284117的博客

06-07

1135

微信小程序获取可视区域数据。

微信小程序--遮罩层

12-14

微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，微信小程序--遮罩层，

微信小程序，弹出层组件

weixin_42941628的博客

07-11

1988

1、从页面底部弹出，背景带遮罩层。

微信小程序——实现简单弹出层

xybhua的博客

02-04

2902

在制作小程序项目时想要弄一个有遮罩层的弹出框，但是写一个这个就弄一个组件比较麻烦，就简单手写一个，本人手拙，要是那点写错了，大家多多指点。

微信小程序原生弹出层

Jie0817的博客

01-16

5035

微信小程序原生弹出层

小程序弹出层---史上最简单写法,已解决滚动穿透问题

最新发布

01-02

### 微信小程序实现购物车浮层效果在微信小程序中创建购物车浮层功能涉及多个方面，包括页面布局设计、交互逻辑处理以及动画效果的实现。下面提供一段简化版的代码示例来展示如何构建这一特性。 #### 页面结构 (WXML) ```xml  <view class="mask" bindtap="toggleCartView" hidden="{{!isShow}}"> <view class="cart-popup">  <scroll-view scroll-y style="height: {{scrollViewHeight}}px;"> <block wx:for="{{goodsList}}" wx:key="id"> <view class="item">{{item.name}}</view> </block> </scroll-view>  <view class="footer"> <button type="primary" size="mini">去结算</button> </view> </view> </view> ``` 此部分定义了一个可点击遮罩层和内部滚动视图用于显示购物车中的项目[^1]。 #### 样式设置 (WXSS) ```css /* components/cartPopup/cartPopup.wxss */ .mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .5); } .cart-popup { width: 90%; max-height: 70vh; margin: auto; border-radius: 8rpx; overflow: hidden; background-color: white; } ``` 上述样式使得弹窗居于屏幕中央并具有一定的透明度背景以增强用户体验。 #### JavaScript行为控制 ```javascript // components/cartPopup/cartPopup.js Component({ properties: {}, data: { isShow: false, goodsList: [], scrollViewHeight: 0 }, methods: { toggleCartView() { this.setData({ isShow: !this.data.isShow }); } }, attached(){ const query = wx.createSelectorQuery().in(this); query.select('.cart-popup').boundingClientRect(); query.exec((res)=>{ let windowHeight = wx.getSystemInfoSync().windowHeight; this.setData({ scrollViewHeight : res[0].height * 0.8 , // 设置为弹框高度的80% }) }) } }) ``` 这段脚本负责管理购物车状态的变化，并计算出合适的`scrollViewHeight`以便更好地适应不同设备上的显示需求。通过以上三个主要组成部分——即HTML模板、CSS样式表单及JavaScript事件处理器——可以有效地实现在微信小程序里添加一个带有良好视觉反馈机制的购物车浮层组件。