uniapp和uview组件实现下拉触底刷新列表

下面是一个在UniApp中使用uView组件实现下拉触底刷新列表的示例，并使用Axios来请求分页数据列表：

1. 首先，确保你已经在UniApp项目中添加了uView组件库。你可以在项目根目录执行以下命令安装它们：

npm install uview-ui

或者使用
Hbuilder X 的插件市场进行引入使用，详情请看官网（建议使用）

https://v1.uviewui.com/components/install.html

2. 在你的Vue页面中，引入uView组件库和Axios库：

import uView from 'uview-ui';
Vue.use(uView);

//或者

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

3. 在你的页面data中定义相关的变量：

data() {
    
    
  return {
    
    
    list: [], // 存储列表数据
    page: 1, // 当前页数
    pageSize: 10, // 每页数据数量
    total: 0, // 总数据条数
    isLoading: false, // 是否正在加载数据
    status: 'loadmore',
	iconType: 'flower',
	loadText: {
    
    
		loadmore: '轻轻上拉',
		loading: '努力加载中',
		nomore: '实在没有了'
	},
  }
},

4. 在mounted生命周期中初始化页面数据，例如在页面加载时请求第一页的数据：

onShow() {
    
    
  this.loadData();
},

5. 编写请求数据的方法，使用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);
    });
  }
},

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