【UniApp】uView组件库的下拉刷新

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

用uView自带的请求适用于一般的请求场景，只支持post、get、put和delete请求，目前不适用于其他的请求形式，比如上传，下载等。

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

以下是使用cli来进行创建的项目的方式，或者说一些老项目的进行方法，但是使用到了uniapp建议还是使用第二种方法，直接使用插件市场引入使用

复制代码

npm install uview-ui

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

v1.uviewui.com/components/...

在你的Vue页面中，引入uView组件库：

javascript 复制代码

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

//或者

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

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

javascript 复制代码

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

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

javascript 复制代码

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

编写请求数据的方法，使用uView插件自带的请求方式发送分页数据请求：

javascript 复制代码

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组件来实现下拉触底刷新列表的效果：

html 复制代码

<template>
  <view>
      <ul v-for="(item, index) in list" :key="index">
        <li>{{ item.title }}</li>
      </ul>
      <u-empty text="暂无数据" mode="list" v-if="list.length == 0"></u-empty>
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
  </view>
</template>

具体实例可以看uView官网：v1.uviewui.com/components/...

7、在生命周期添加下面内容

js 复制代码

onReachBottom() {
			let that = this;
			if(this.list.length == this.total) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				that.loadData(); //请求的接口数据
				if(this.list.length == this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},

在上述例子中：

loadData()方法用于发送请求获取分页数据，并更新页面的数据。
list变量用来存储列表数据。
status 变量用来标识数据是否正在加载的文字。
onReachBottom用于触发获取下一页数据。

以上示例使用了uView的LoadMore组件来实现下拉触底刷新列表，你可以根据自己的需求进行修改和调整，如改变请求的接口地址和参数，修改列表的渲染方式等。