uni-app nvue cell delete-animation 设置为default并无动画效果
uni-app nvue cell delete-animation 设置为default并无动画效果
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 10 专业版 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：window 10 专业版
HBuilderX类型：正式
HBuilderX版本号：3.4.6
手机系统：iOS
手机系统版本号：iOS 14
手机厂商：苹果
手机机型：iphone XR
页面类型：nvue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX
示例代码：
```html
<template>
<div class="pageWrapper">
<list>
<cell v-for="(item,index) in list" :key="index" [@click](/user/click)="goChat(item)" [@longpress](/user/longpress)="showShoot(item,index)" insert-animation="default" delete-animation="default " recycle >
<div class="item">
<div class="item-media">
<image :src="item.avatar" class="avatar" mode="aspectFill"></image>
<div class="badge" v-if="item.badgeNum>0">
<text class="badgeText">{{item.badgeNum>100?'99+':item.badgeNum}}</text>
</div>
</div>
<div class="item-inner">
<div class="top">
<div>
<text class="name">{{item.name}}</text>
</div>
<div>
<text class="time">{{utils.timestampFormat('2021/06/22 15:44:10')}}</text>
</div>
</div>
<div class="bottom">
<text class="content">{{item.content}}</text>
</div>
</div>
</div>
</cell>
</list>
</div>
</template> <script>
import utils from '../../common/utils.js'
const dom = uni.requireNativePlugin('dom');
export default {
data() {
return {
utils: utils,
lastTouchIndex: -1,
list: [{
type: 'text',
badgeNum: 0,
name: '闫威 小程序开发',
avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1650868194,3331868551&fm=26&gp=0.jpg',
content: 'Hi, I am good!',
}, {
type: 'video',
badgeNum: 0,
name: '清晨',
avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3155998395,3600507640&fm=26&gp=0.jpg',
content: 'Hi, I am good!'
}, {
type: 'text',
badgeNum: 3,
name: '粗长的花朵j j l'
}
]
}
}
</script>操作步骤：
nvue页面 使用cell 设置属性delete-animation的值为default 渲染数组 删除其中某一项预期结果：
出现删除动画实际结果：
无任何动画bug描述：
nvue cell delete-animation 设置为default 当我删除数组某一项后 并未观察出动画效果 我不确定这是不是一个 bug
2 回复
在 uni-app 中使用 nvue 开发时，cell 组件的 delete-animation 属性用于设置删除单元格时的动画效果。如果你将 delete-animation 设置为 default，但发现没有动画效果，可能是以下几个原因导致的：
1. 平台兼容性问题
nvue 是 uni-app 中用于跨平台开发的渲染引擎，但某些平台可能对 delete-animation 的支持不完全。确保你测试的平台（如 iOS 或 Android）支持该动画效果。
2. delete-animation 属性值
delete-animation 属性默认值是 default，但可能在某些平台或版本中，default 并不对应任何动画。你可以尝试将 delete-animation 设置为其他值，如 fade 或 slide，来查看是否有动画效果。
<cell delete-animation="slide"></cell>3. 样式或布局问题
如果 cell 组件的样式或布局设置不当，可能会导致动画无法正常显示。例如，cell 的高度为 0 或者 overflow 属性设置为 hidden，都可能导致动画不可见。
确保 cell 的样式设置正确，并且有足够的高度来显示动画。
<cell style="height: 100px;" delete-animation="default"></cell>4. nvue 版本问题
如果你使用的 uni-app 或 nvue 版本较旧，可能存在一些已知的 bug 或功能缺失。尝试更新到最新版本，看看问题是否得到解决。
5. 事件绑定问题
确认你是否正确地绑定了删除事件。如果删除事件未触发，动画效果也不会显示。
<cell delete-animation="default" [@delete](/user/delete)="handleDelete"></cell>methods: {
handleDelete() {
console.log('Cell deleted');
}
}6. 检查控制台日志
打开开发者工具，查看控制台是否有任何错误或警告信息。这些信息可能会帮助你找到问题的根源。
7. 使用 animation 属性
如果 delete-animation 无法满足需求，你可以尝试使用 animation 属性来自定义动画效果。
<cell animation="slide"></cell>