微信小程序中巧妙使用 wx:if 和 catchtouchmove 实现弹窗禁止页面滑动功能

Jiaberrr2024-09-16 5:02

大家好，今天我要和大家分享的是在微信小程序开发过程中，如何利用 wx:if 或 wx:elif 来条件性地渲染不同的元素，并结合 catchtouchmove 事件处理函数来解决弹窗弹出时禁止背后页面滑动，而弹窗消失时恢复滑动的功能。

在微信小程序中，我们经常会遇到这样的场景：当弹窗出现时，我们希望用户无法滑动背后的页面，以避免误操作。而当弹窗消失后，用户又可以正常滑动页面。这时，我们就需要用到 catchtouchmove 事件来阻止页面的滑动。

然而，直接在元素上绑定 catchtouchmove 并不能实现动态控制，这就需要我们另辟蹊径。

解决方案

使用 wx:if 或 wx:elif 结合 catchtouchmove 事件处理函数来实现这一功能

1. 定义数据属性

首先，我们需要在页面的 data 对象中定义一个布尔类型的属性，用于控制弹窗的显示与隐藏。例如：

javascript 复制代码

Page({
  data: {
    showModal: false // 控制弹窗显示与隐藏
  }
});

2. 使用 wx:if 条件渲染

接下来，我们使用 wx:if 来条件性地渲染页面元素。当弹窗显示时，渲染一个带有 catchtouchmove 事件的元素；当弹窗隐藏时，渲染另一个不带 catchtouchmove 事件的元素。

html 复制代码

<view wx:if="{{showModal}}">
  <view class="modal-container" catchtouchmove="preventMove"></view>
</view>
<view wx:else>
  <view class="content-container"></view>
</view>

3. 定义事件处理函数

在 Page 对象中，我们需要定义 preventMove 函数，用于阻止滑动事件。

javascript 复制代码

Page({
  // ... 其他数据和方法

  preventMove: function(e) {
    // 阻止滑动事件
    可以不做任何操作就能阻止滑动
  }
});

4. 控制弹窗显示与隐藏

最后，我们需要在合适的时机（如点击按钮）修改 showModal 的值，以控制弹窗的显示与隐藏。

javascript 复制代码

showModal: function() {
  this.setData({
    showModal: true
  });
},

hideModal: function() {
  this.setData({
    showModal: false
  });
}

希望这篇文章能对大家有所帮助！