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
来人啊
更多关于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报告或解决方案。