uniapp 触底以后,如果没有内容再加载了,就有个上弹的动画,应该怎么做
时间: 2024-03-19 17:44:48 浏览: 151
在uniapp中,在触底事件中,可以通过判断是否还有更多数据需要加载来控制上弹动画的显示和隐藏。当没有更多数据需要加载时,可以使用`uni.createAnimation`创建动画对象,然后通过调用`translateY`方法设置动画的位移,最后通过调用`step`方法将动画保存下来。然后在页面中使用`animation`组件,将保存的动画对象传递给组件的`animation`属性,即可实现上弹动画。
以下是一个示例代码:
```html
<template>
<view>
<!-- 列表内容 -->
<view v-for="(item, index) in list" :key="index">{{ item }}</view>
<!-- 上弹动画 -->
<animation :animation="animationData" v-if="!hasMoreData">
<view class="loading">
<image class="loading-img" src="~/static/loading.gif" />
<text class="loading-text">没有更多了</text>
</view>
</animation>
</view>
</template>
<script>
export default {
data() {
return {
list: [], // 列表数据
hasMoreData: true, // 是否还有更多数据需要加载
animationData: {}, // 上弹动画对象
};
},
methods: {
// 触底事件
onReachBottom() {
// 判断是否还有更多数据需要加载
if (this.hasMoreData) {
// 加载数据
// 如果没有更多数据了,设置hasMoreData为false,然后执行上弹动画
this.hasMoreData = false;
this.showAnimation();
}
},
// 上弹动画
showAnimation() {
const animation = uni.createAnimation({
duration: 500,
timingFunction: 'ease',
});
animation.translateY('-100%').step();
this.animationData = animation.export();
},
},
};
</script>
<style>
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
}
.loading-img {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.loading-text {
font-size: 28rpx;
color: #999;
}
</style>
```
在上面的示例中,当没有更多数据需要加载时,会执行`showAnimation`方法,创建一个位移为`-100%`的动画对象,并将其保存在`animationData`中。然后在页面中使用`animation`组件来展示动画。需要注意的是,在`animation`组件中使用`v-if`来判断是否需要显示动画,避免出现在没有触底到最底部时就显示上弹动画的情况。
阅读全文