首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

禁止遮罩下页面滑动

最近在业务中遇见一个问题,就是弹出一个蒙版,覆盖整个页面,有一部分内容固定在底部。可是底部内容还是能滑动。 我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。...content.addEventListener('touchmove', function (e) { e.preventDefault(); }, false) 这两个都是禁止touch事件,在移动端有效,在PC端用滚轮滑动就禁止不了...还有要注意,新版chrome在PC模式下可以,手机模式下会报错,要声明阻止滑动不是被动的: var content = document.getElementsByTagName('body')[0];...在这边要分享一件事,就是在微信下,当你滑动的时候,透过遮罩触发了body,那么微信默认进行一个进程一样,得等一下才能滑动遮罩上面的元素。暂时没有优化的方法,当然,遮罩没有透明度不会出现。 (完)

2.1K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Axure原型设计丨页面滑动效果

    (3)动态面板的state1内拖入的矩形(我用图片代替)命名为“滑动图片”,动态面板命名为“滑动面板”。 设置交互样式 (1)单击“滑动面板”,设置“右侧工具栏属性——拖动时”交互。...点击确定,设置完成后交互显示如下: 此时已经设置好case1,此处是滑动页面与顶部的交互,让滑动页面在离开顶部范围后能自动滑回顶部。...点击确定,设置完成后交互显示如下: 此时已经设置好case2,此处是滑动页面与底部的交互,让滑动页面在离开底部范围后能自动滑回底部。...以上就设置完成啦,最终的“滑动面板”设置交互样式如下: 小白问答: 问题:如果里面的滑动图片有自己独立交互怎么办?...答案:为了让页面滑动后返回的效果更加柔和,移动时间可以根据需要调节哦。

    2K00

    PHP压缩html页面

    html页面压缩之后,可以大大提升页面的加载速度,下面的压缩代码去掉了页面中的所有空格、注释、制表符、换行符等等比较多余的字符,下面的代码是写以在thinkphp5中为例的,不过在他PHP程序是通用的...view_replace_str'))             ->fetch($data, $this->vars, $this->replace);                  /* 自定义页面压缩...php echo ', $outputHtml)));         }                  return $outputHtml;     } 2、在页面公共部分或者你需要使用页面压缩的模块设置一个宏变量进行标记...,我的如下     //设置开启页面压缩,true为开启页面压缩,false相反     define('IS_PAGE_ZIP', false); 3、最后压缩后的效果如下图:

    8.1K10

    编写第二个页面新闻阅读列表页面

    笔记内容:编写第二个页面新闻阅读列表页面 笔记日期:2018-01-06 ---- 使用Swiper组件构建轮播图 关于Swiper组件的官方描述文档: https://mp.weixin.qq.com...构建新闻列表 json配置文件的官方参考文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html 注:除了app.json之外的...官方给出的关于page页面生命周期的文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html 数据绑定...小程序的事件机制(冒泡与非冒泡) 到目前为止,我们就编写好了两个页面——启动页面新闻列表页面,现在我们需要通过小程序的事件机制,让我们点击启动页面的时候,就能够进入到新闻列表页面。.../posts/post", }) } }) 编写完以上代码后,就可以点击启动页中的view组件跳转到新闻列表页面了。

    2.1K10

    第三个页面:构建新闻详情页面

    笔记内容:构建新闻详情页面 从文章列表跳转到新闻详情页(组件自定义属性及获取属性) 在编写从文章列表跳转到新闻详情页的代码之前,先来修改一下之前的页面,之前我们编写了两个模板文件,但是还有两个细节没有完善好...---- 先静后动,先构建新闻详情页面样式 编写post-detail.wxml代码: <image src='/images/post/sls.jpg...---- 使用数据填充<em>新闻</em>详情<em>页面</em> 首先是postId的获得,因为不同的postId需要输出不同的文章详情数据: 1.在post.js的navigateTo方法的url参数中,加上一个id参数: onPostTap...完成以上操作后,就可以把<em>新闻</em>详情<em>页面</em>的数据放进数据文件中,然后进行数据绑定: post-data.js文件内容: // 将数据整合成数组类型 var local_database = [ {.../debug/wxadoc/dev/component/audio.<em>html</em> 我们需要使用到两个API,playBackgroundAudio以及pauseBackgroundAudio。

    1.8K20

    使用 Axure RP 8 进行滑动页面设计

    以下简称 Axure: 今天我们就来介绍一下如何使用 Axure 进行滑动页面的设计。滑动页面分为两种,分别是垂直滑动和水平滑动;垂直滑动就是上下滑动;水平滑动就是左右滑动。...在线演示地址:https://pe6n3i.axshare.com ---- 首先我们需要明白一个道理,我们之所以需要滑动页面来获取信息,是因为手机本来的大小不足以让我们看到所有的内容;假设我们手机大小为一级页面...,所以我们在做原型的时候需要将内容都放到二级页面上,以及页面只是控制显示大小的。 一、垂直滑动 垂直滑动需要两个动态面板,为了区分方便,我们将其命名为一级页面和二级页面。...只需要给一级页面添加交互,二级不需要,到此就实现了垂直滑动。 二、水平滑动 ? 所以我们新建动态面板,手机展示的内容为一级面板。 首先拖入一个一级动态面板 375*600 ,命名为一级页面。...生活中咱们的手机左右滑动一般是切换页面,而不是拖动手机屏幕,所以这里不需要两个面板,只需要多个状态。 接下来新建一个面板状态。 ? 然后往两个状态里添加内容即可。 ?

    1.9K10
    领券