如何阻止小程序遮罩层下方图层滚动

这篇文章主要介绍了如何阻止小程序遮罩层下方图层滚动,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

原因是因为：

touchmove事件冒泡；

解决方案:

阻止遮罩层冒泡，在小程序里面 利用catch+事件名就可以阻止冒泡，

所以 在遮罩层填上事件

catchtouchmove="preventdefault"

小程序1.5.0后可以写上

capture-catch:touchmove="preventdefault"

完美 哈哈；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 小程序显示弹窗时禁止下层的内容滚动实现方法

    小程序显示弹窗时禁止下层的内容滚动实现方法,具体如下 ①  第一种方式 利用position:fixed.  禁止页面滚动. 一. 页面结构html  <view class="indexPage {{proInfoWindow?'indexFixed':''}}"> -----------此处为整个页面的结构内容 <button catchTap="_proInfoWindowShow">点击显示弹窗</button> <

  • 微信小程序自定义tab实现多层tab嵌套功能

    微信小程序自定义tab实现多层tab嵌套功能

    小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构 先看效果图吧

  • 微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    前言:这篇文章讲什么 微信小程序中 textarea 组件的层级过高如何解决 前言:这篇文章对谁有用 微信小程序开发者 前言:本文有什么用? 提供解决问题的思路,供你参考 (因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴.或者是做成一个组件然后开源) 前言:本文时效性 截止至2018年10月30号,微信的 textarea 还是以原生组件形式实现,因此层级最高.无法通过 z-index 进行调整.在微信小程序官方把 textarea 改成了可以控制层级之前.本文中的内容会一直有效.

  • 微信小程序实现卡片层叠滑动效果

    微信小程序实现卡片层叠滑动效果

    本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下 代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{ id: 1, zIndex: 2, opacity: 0.2, left: 40, iamge: "../../images/1.jpg", animation: nu

  • 微信小程序实现锚点定位楼层跳跃的实例

    微信小程序实现锚点定位楼层跳跃的实例

    微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现 效果图如下: WXML: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}}&

  • 微信小程序textarea层级过高的解决方法

    一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制 二.使用场景及解决方案 1.弹窗显示 2.底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格 针对以上两种业务

  • 微信小程序实现弹出层效果

    微信小程序实现弹出层效果

    本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下 先看下效果图吧 其实这个效果实现起来很简单,就是通过三目运算符来控制遮罩层的显示和隐藏 贴代码了: 规则按钮: <text class='rule' bindtap='showRule'>规则</text> 遮罩层:我这个数据是从后台拿来动态渲染到页面的 <!-- 规则提示 --> <view class="ruleZhezhao {{isRuleTrue?'isRuleS

  • 如何阻止小程序遮罩层下方图层滚动

    如何阻止小程序遮罩层下方图层滚动

    这篇文章主要介绍了如何阻止小程序遮罩层下方图层滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 原因是因为: touchmove事件冒泡: 解决方案: 阻止遮罩层冒泡,在小程序里面 利用catch+事件名就可以阻止冒泡, 所以 在遮罩层填上事件 catchtouchmove="preventdefault" 小程序1.5.0后可以写上 capture-catch:touchmove="preventdefault"

  • jQuery阻止移动端遮罩层后页面滚动

    css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla

  • 弹出遮罩层后禁止滚动效果【实现代码】

    方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • 微信小程序实现多行文字滚动

    微信小程序实现多行文字滚动

    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu

  • 微信小程序实现多行文字滚动效果

    本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu

  • 微信小程序功能之全屏滚动效果的实现代码

    微信小程序功能之全屏滚动效果的实现代码

    想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu

  • 微信小程序scroll-view锚点链接滚动跳转功能

    微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 解决微信小程序scroll-view组件无横向滚动的问题

    微信开放文档中scroll-view组件的部分代码如下 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H demo-text-1"></vi

  • 微信小程序实现瀑布流分页滚动加载

    微信小程序实现瀑布流分页滚动加载

    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页

  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    目录 目录 实现效果 下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结 在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们

随机推荐