微信小程序scroll-view实现滚动穿透和阻止滚动的方法

scroll-view滚动穿透，阻止滚动

页面弹窗阻止滚动是一种常见的问题，这里简单介绍小程序scroll-view的一种解决方式

常用阻止滚动方式

在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动

<view catchtouchmove="doNothing"></view>

也可直接写catchtouchmove，相当于绑定了事件名为true的事件

问题场景

在小程序中，在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素，必须使用scroll-view组件，无法阻止页面本身的滚动

解决办法

既然无法简单的阻止事件穿透，就在页面可滚动的元素本身想想办法：

页面滚动元素

小程序中的简单布局，在页面内容超出一屏时，滚动的元素是page

如何让页面不滚动

将page的高度设为100%，页面最外层放一个view，打开弹窗时通过一个class增加样式，设页面高度100%，overflow: hidden来停止滚动

打开弹窗时设isStopBodyScroll为true，关闭时设为false

<view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}">
 <!-- 页面内容 -->
</view>

.scroll-lock {
 height: 100%;
 overflow-y: hidden;
}

存在的问题

这样设置页面会回到顶部，期待有更好的解决方式或官方对这个问题提供支持

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

赞 (0)

相关推荐

  • 微信小程序scroll-view组件实现滚动动画

    本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位: 利用scroll-view的scroll-with-animation属性实现滚动动画过度. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIn

  • 微信小程序 scroll-view隐藏滚动条详解

    微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    一.实践踩坑 项目使用mpvue开发 1. scroll-view默认是不滚动的..所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了.所以要scroll-view的样式要这样设置: scroll-view { width: 100%; white-space: nowrap; // 不让它换行 } 3. 然后在定宽

  • 微信小程序 点击切换样式scroll-view实现代码实例

    微信小程序 点击切换样式scroll-view实现代码实例

    这篇文章主要介绍了微信小程序 点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="

  • 微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

    具体代码如下所示: // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"> <block wx:for="{{

  • 微信小程序 scroll-view实现锚点滑动的示例

    微信小程序 scroll-view实现锚点滑动的示例

    前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏

  • 详解微信小程序之scroll-view的flex布局问题

    关于微信小程序的scroll-view组件,第一次写的时候是直接在scroll-view中用了一层容器包裹子元素,然后用了flex布局,并且是用了组件来实现的横向滚动,后面有提出改进,但是不记录下,就发现过了几天,就有点懵了 1.效果图 2.在scroll-view里加一层容器,使用flex布局实现 这里用flex布局实现的话,就要用组件的形式 wxss文件 .scrollView{ padding: 0 20rpx; white-space: nowrap; box-sizing: borde

  • 微信小程序 scroll-view 水平滚动实现过程解析

    微信小程序 scroll-view 水平滚动实现过程解析

    1. scroll-view水平滚动使用 1. wxml <scroll-view class="scroll-wrap" scroll-x> <view class="scroll-view-item"> <view class="scroll-img-wrap scroll-major-img-wrap"> <image src="../../images/wukecheng@2x.png&

  • 微信小程序scroll-view实现滚动穿透和阻止滚动的方法

    scroll-view滚动穿透,阻止滚动 页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove="doNothing"></view> 也可直接写catchtouchmove,相当于绑定了事件名为t

  • 微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

    目录 view结构 js部分 属性解释 说明 注意 这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的之后,则切换左侧分类状态,而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下,同样激活左侧分类状态. view结构 左侧父级分类 <scroll-view class="left" scroll-y > <view

  • 微信小程序自定义弹出模态框禁止底部滚动功能

    图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view> <!--模态框--> <!-- 遮罩层 --> <view class="mod

  • 微信小程序movable view移动图片和双指缩放实例代码

    微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 微信小程序实现元素渐入渐出动画效果封装方法

    微信小程序实现元素渐入渐出动画效果封装方法

    开端 之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了.做到类似jQuery show()的效果 原创文章,允许转载分享.但请转载请一定标明出处,这是起码的尊重 本文章阅读前需要对微信小程序的动画api有所了解 先看效果 可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画 解决 1.寻根问底,发现

  • 微信小程序中使用自定义图标（阿里icon）的方法

    微信小程序中使用自定义图标（阿里icon）的方法

    weui提供的图标比较少,有时我们需要更多的图标,可以使用以下方法自定义图标库: 1,到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,下载代码,解压,打开iconfont.css 2,在wxss文件中引用字体 <style type="less"> @font-face { font-family: 'iconfont'; src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAI

  • 微信小程序中使元素占满整个屏幕高度实现方法

    微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,

  • 微信小程序实现image组件图片自适应宽度比例显示的方法

    微信小程序实现image组件图片自适应宽度比例显示的方法

    本文实例讲述了微信小程序实现image组件图片自适应宽度比例显示的方法.分享给大家供大家参考,具体如下: 一. 了解image组件 由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了.下面就来一起解决下 二. 方法 (一).使用mode:widthFix widthFix:宽度不变,高度自动变化,保持原图宽高比不变. 首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx. 这样图片也可以自适应了..因为小程序的r

  • 微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】

    微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋对弈.悔棋DEMO 效果图 分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current

随机推荐