如何让uniapp小程序项目以最少的代码让每个页面下拉刷新页面时都有u-loading的效果呢
时间: 2024-03-09 21:51:50 浏览: 85
uniapp实现上拉刷新下拉加载
你可以使用uni-app提供的全局mixin功能和uni-app官方提供的下拉刷新组件,来实现这个效果。具体步骤如下:
1. 在common目录下创建一个mixin.js文件,内容如下:
```
export default {
onPullDownRefresh() {
uni.showLoading({
title: '加载中'
})
// 这里可以写你的下拉刷新逻辑,如获取最新数据
setTimeout(() => {
uni.hideLoading()
uni.stopPullDownRefresh()
}, 1000)
}
}
```
这个mixin会在每个页面下拉刷新时显示loading效果,并且执行你自己的下拉刷新逻辑,最后隐藏loading效果。
2. 在需要下拉刷新的页面中,使用uni-app官方提供的下拉刷新组件,并引入刚才的mixin:
```
<template>
<view>
<view class="content">
<!-- 这里是页面内容 -->
</view>
<uni-refresher @refresh="onRefresh">
<view slot="content">
<!-- 这里是下拉刷新的提示内容 -->
</view>
</uni-refresher>
</view>
</template>
<script>
import globalMixin from '@/common/mixin'
export default {
mixins: [globalMixin],
methods: {
onRefresh() {
// 下拉刷新回调函数
console.log('onRefresh')
}
}
}
</script>
```
这样每个需要下拉刷新的页面都会自动使用这个loading效果,并且执行你自己的下拉刷新逻辑,而且只需要写很少的代码。
阅读全文