下面是一个在UniApp中使用uView组件实现下拉触底刷新列表的示例，并使用Axios来请求分页数据列表：
- 首先，确保你已经在UniApp项目中添加了uView组件库。你可以在项目根目录执行以下命令安装它们：
npm install uview-ui
或者使用
Hbuilder X 的插件市场进行引入使用，详情请看官网（建议使用）
https://v1.uviewui.com/components/install.html
- 在你的Vue页面中，引入uView组件库和Axios库：
import uView from 'uview-ui';
Vue.use(uView);
//或者
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
- 在你的页面data中定义相关的变量：
data() {
return {
list: [], // 存储列表数据
page: 1, // 当前页数
pageSize: 10, // 每页数据数量
total: 0, // 总数据条数
isLoading: false, // 是否正在加载数据
status: 'loadmore',
iconType: 'flower',
loadText: {
loadmore: '轻轻上拉',
loading: '努力加载中',
nomore: '实在没有了'
},
}
},
- 在mounted生命周期中初始化页面数据，例如在页面加载时请求第一页的数据：
onShow() {
this.loadData();
},
- 编写请求数据的方法，使用uView插件自带的请求方式发送分页数据请求：
methods: {
loadData() {
this.$u.get('url', {
page: this.page,
pageSize: this.pageSize
})
.then(response => {
const data = response.data;
this.list = this.list.concat(data.list); // 将返回的数据添加到列表数据中
this.total = data.total; // 更新总数据条数
})
.catch(error => {
console.error(error);
});
}
},
- 在template中使用uView的LoadMore组件来实现下拉触底刷新列表的效果：
<template>
<view>
<ul v-for="(item, index) in list" :key="index">
<li>{{ item.title }}</li>
</ul>
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
</view>
</template>
具体实例可以看uView官网：https://v1.uviewui.com/components/loadMore.html
7、在生命周期添加下面内容
onReachBottom() {
let that = this;
if(this.tableData.length == this.total) return ;
this.status = 'loading';
this.page = ++ this.page;
setTimeout(() => {
that.loadData(); //请求的接口数据
if(this.tableData.length == this.total) this.status = 'nomore';
else this.status = 'loading';
}, 2000)
},
在上述例子中：
loadData()方法用于发送请求获取分页数据，并更新页面的数据。list变量用来存储列表数据。status变量用来标识数据是否正在加载的文字。onReachBottom用于触发获取下一页数据。
以上示例使用了uView的LoadMore组件来实现下拉触底刷新列表，你可以根据自己的需求进行修改和调整，如改变请求的接口地址和参数，修改列表的渲染方式等。
