uni-app Nvue页面使用list标签的@disappear事件绑定在cell标签上不生效

uni-app Nvue页面使用list标签的@disappear事件绑定在cell标签上不生效

开发环境 版本号 项目创建方式
Windows HBuilderX
4.29
iOS iOS 16
苹果
苹果11promax
nvue vue2

操作步骤:

Nvue页面使用list标签@disappear事件绑定在cell标签上不生效,安卓手机正常,在ios手机上下滑能正常获取参数,上滑时候不生效,不触发事件

预期结果:

Nvue页面使用list标签@disappear事件绑定在cell标签上不生效,安卓手机正常,在ios手机上下滑能正常获取参数,上滑时候不生效,不触发事件

实际结果:

Nvue页面使用list标签@disappear事件绑定在cell标签上不生效,安卓手机正常,在ios手机上下滑能正常获取参数,上滑时候不生效,不触发事件

bug描述:

Nvue页面使用list标签@disappear事件绑定在cell标签上不生效,安卓手机正常,在ios手机上下滑能正常获取参数,上滑时候不生效,不触发事件


更多关于uni-app Nvue页面使用list标签的@disappear事件绑定在cell标签上不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

来人啊

更多关于uni-app Nvue页面使用list标签的@disappear事件绑定在cell标签上不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中,nvue页面使用list标签和cell标签时,如果你发现@disappear事件绑定在cell标签上不生效,这通常是因为@disappear事件并不是直接绑定在cell标签上的,而是应该绑定在list标签或者通过某种方式间接处理。

nvue中,list组件是用来高效渲染大量列表数据的,而cell组件是list的子组件,用于展示单个列表项。@disappear事件通常用于检测列表项是否离开了可视区域,这个事件应当绑定在list组件上,并通过事件参数来判断是哪个cell离开了可视区域。

以下是一个示例代码,展示了如何在nvue页面中使用list组件并处理@disappear事件:

<template>
  <div>
    <list :scroll-y="true" @scroll="onScroll" @disappear="onDisappear">
      <cell v-for="(item, index) in listData" :key="index">
        <text>{{ item.text }}</text>
      </cell>
    </list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        // ... more items
      ],
    };
  },
  methods: {
    onScroll(e) {
      // Handle scroll event if needed
      console.log('Scroll event:', e);
    },
    onDisappear(e) {
      // e.detail contains information about which items have disappeared
      const disappearedItems = e.detail.disappearedItems;
      console.log('Disappeared items:', disappearedItems);
      // You can use disappearedItems to update your state or perform other actions
    },
  },
};
</script>

<style>
/* Add any necessary styles here */
</style>

在这个例子中,@disappear事件被绑定在list组件上。当滚动发生时,如果某些cell离开了可视区域,onDisappear方法会被调用,并且事件参数e.detail.disappearedItems会包含所有离开可视区域的cell的索引。

请注意,nvue的组件和事件处理与普通的Vue页面有所不同,特别是与DOM操作相关的事件。因此,务必参考uni-app的官方文档,了解nvue页面的特殊之处和最佳实践。

如果上述方法仍然无法解决问题,建议检查uni-app的更新日志和社区论坛,看看是否有相关的bug报告或解决方案。

回到顶部