下面是一个在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组件来实现下拉触底刷新列表，你可以根据自己的需求进行修改和调整，如改变请求的接口地址和参数，修改列表的渲染方式等。
