小程序自定义弹出层禁止页面滚动

最新推荐文章于 2024-09-19 14:00:47 发布

原创最新推荐文章于 2024-09-19 14:00:47 发布 · 712 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

26 篇文章

订阅专栏

本文介绍了在微信小程序中遇到的问题：catchtouchmove在模拟器中无效，但在真机测试时正常工作。由于持续出现错误提示，作者通过定义filterViewMove函数来避免警告，并展示了相关代码实现，包括视频组件的配置和样式设置，以及如何阻止页面滚动。

catchtouchmove 在小程序模拟器中没有效果，真机测试时可以

使用catchtouchmove=“true”，会一直弹出警告错误“does not have a method “true” to handle event “touchmove”，所以这里定义个方法

<block wx:if="{{showVideo == true}}">
  <view class="showVideoBg" catchtouchmove="filterViewMove">
        <view>
        <video 
          id="myVideo" 
          src="video_url" 
          binderror="videoErrorCallback" 
          show-center-play-btn='true' 
          show-play-btn="true" 
          autoplay="true"
          object-fit="cover"
          controls
          enable-play-gesture="{{true}}"
          bindended="closeVideo"
        ></video>
        <image src="/images/close.png" class="close_video" bindtap="closeVideo"></image>
      </view>
  </view>
</block>


.showVideoBg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;
}
.showVideoBg view{
  width: 100%;
  height: 100%;
  position: relative;
}
.showVideoBg scroll-view{
  width: 100%;
  height: 100%;
}
.showVideoBg video{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.close_video{
  position: absolute;
  top: 100rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx !important;
}

// 定义页面禁止滚动
  filterViewMove: function(){
    return;
  },