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

原因是因为：

　　touchmove事件冒泡；

解决方案:

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

　　所以在遮罩层填上事件

　　　　catchtouchmove="preventdefault"

　　小程序1.5.0后可以写上

　　　　capture-catch:touchmove="preventdefault"

完美哈哈；

原文地址：https://www.cnblogs.com/wang-xx/p/11405537.html

时间： 2024-11-06 03:47:08

阻止小程序遮罩层下方图层滚动的相关文章

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

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-t

小程序学习（四）小程序逻辑层之注册页面

小程序学习(四)小程序逻辑层之注册页面注册页面(Page) 小程序页面的注册,是通过 Page() 函数来完成的.接受一个 object 参数,指定页面的初始数据,生命周期.事件处理函数等. object 参数的属性: 属性类型描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 onHide Func

弹出遮罩层后禁止滚动效果

弹出遮罩层后,手指在手机上上下滑动遮罩层下的页面出现滑动.下面代码解决这个问题 (1)触摸后不产生事件 //遮罩层禁止滚动 $('.searbox_mask_byInteg').bind("touchmove", function (e) { e.preventDefault(); }); (2)body不出现滚动条 $("body,.main").height($(window).height()).css({ "overflow-y": &

微信小程序学习七视图层wxml语法

微信小程序的wxml语法和vue的挺像数据绑定 wxml <view> {{message}} </view> js Page({ data:{ message:"hello mina" } }) 列表渲染 使用wx:item 指定遍历项得别名,使用wx:index来指定遍历项的索引别名使用wx:key指定来指定遍历项的标识符,默认得遍历项的别名为item,索引别名为index <view wx:for="{

前端小demo——遮罩层逐渐变透明

点击按钮触发事件使遮罩层逐渐变透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 430px; height: 280px; } div { width: 1600px; height: 300px; background

10.小程序视图层数据绑定

数据绑定 WXML 中的动态数据均来自对应 Page 的 data. 只要把data中的数据改变,视图层就会自动改变,无需使用DOM操作. 简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来使用方法: {{ 内容 }} 在组件中使用!不论是在组件包含在内,还是在组件属性内的,都是需要使用双花括号! 示例: index.wxml: index.js: 运行: 在控制台可以查看到wxml的id,是data的数据原文地址:https://www.cnblogs.com/kai-z

小程序功能之全屏滚动

想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 原文:https://blog.csdn.net/W_SSNY/article/details/84298788 先上效果: 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bi

小程序框架之视图层 View~获取界面节点信息

获取界面上的节点信息 WXML节点信息节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect(function(res){ res.top // #the-id 节点的上边界坐标(相对于显示区域) }) query.selectV

小程序中底部出现的滚动选择控件

想要的效果: 从后台接口返回的内容是: 主要就是:range-key 的使用,一定要将其中的属性字段添加上单引号! 原文地址:https://www.cnblogs.com/ZhangYaF/p/10803730.html