uni-app Nvue页面在ios系统环境下使用@appear事件不生效

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app Nvue页面在ios系统环境下使用@appear事件不生效

操作步骤：

  • 往上滑动就是正常的触发事件，但是往下滑动后再往上滑动回到之前视频就不会触发事件

预期结果：

  • 希望能像安卓系统一样正常触发，上滑下滑都能触发

实际结果：

  • 只能一直上滑动，不能往下再往上重复滑动，事件不生效

bug描述：

需求是短剧滑动到当前显示视频就自动播放，通过官方提供的@appear事件获取当前滑动的值来自动播放视频，现在问题是Nvue页面在ios系统环境使用@appear事件不生效，比如我正常往上滑动事件正常触发，但是我往下滑动回到上一个视频再往上滑动事件回到之前视频就不生效了，@appear事件就不会触发，安卓环境没问题都能正常触发，

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 16
手机厂商 苹果
手机机型 苹果11promax
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

Image Image Image


Harmonyos Next教程
1 回复

在uni-app中，@appear 事件通常用于页面或组件的显示时触发。如果你发现该事件在iOS系统环境下的nvue页面中不生效，可能是由于一些特定于iOS或nvue的限制。以下是一些可能的解决方案和代码示例，你可以尝试这些方法来确保@appear事件能够在iOS上正常工作。

1. 确认@appear事件的正确用法

首先，确保你在nvue页面中正确使用了@appear事件。以下是一个简单的示例：

<template>
  <div @appear="onAppear">
    <!-- 页面内容 -->
    <text>Hello, uni-app!</text>
  </div>
</template>

<script>
export default {
  methods: {
    onAppear() {
      console.log('Page appeared!');
    }
  }
}
</script>

<style>
/* 样式部分 */
</style>

2. 尝试使用onPageShow生命周期函数

如果@appear事件在iOS上仍然不生效，你可以考虑使用nvue页面提供的onPageShow生命周期函数，这个函数在页面显示时会被调用。

<script>
export default {
  onPageShow() {
    console.log('Page showed!');
  },
  methods: {
    // 其他方法
  }
}
</script>

3. 检查是否有其他事件或样式影响

有时候，其他事件或样式可能会影响@appear事件的触发。例如，如果页面被其他元素遮挡或隐藏，@appear事件可能不会触发。确保页面或元素在显示时没有被其他内容覆盖。

4. 使用定时器或延迟检查

在某些情况下，由于页面渲染的异步性，@appear事件可能不会立即触发。你可以尝试使用定时器或延迟来检查事件是否会在稍后触发。

<script>
export default {
  methods: {
    onAppear() {
      setTimeout(() => {
        console.log('Checked after delay: Page appeared!');
      }, 1000); // 延迟1秒检查
    }
  }
}
</script>

5. 查阅官方文档和社区

如果上述方法都没有解决问题，建议查阅uni-app的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。

总结

在iOS系统环境下的nvue页面中，@appear事件不生效可能是由于多种原因造成的。通过确认事件的正确用法、使用生命周期函数、检查其他事件或样式的影响、使用定时器或延迟检查以及查阅官方文档和社区，你应该能够找到问题的根源并解决它。

回到顶部