uni-app滚动分页兼容(App 小程序 H5)-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app滚动分页兼容(App 小程序 H5)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

因为手机端本身屏幕空间不大所以大家一般都会选择用滚动分页

首先我在根目录下创建了一个 api目录下面创建了一个bookApi.js
其中写了一个请求函数
getBookList 根据当前页 page 和每页展示多少条 pageSize 获取数据
那么我的组件代码是这样的

<template>
  <scroll-view
    class="box"
	scroll-y="true"
	@scrolltolower="scrollToLower"
	v-if="!loading"
  >
    <view
	  class="management"
	  v-for = "item in bookList"
	  :key = "item.id"
	>{{ item.name }}</view>
  </scroll-view>
  <view v-else>
	  正在加载
  </view>
</template>
<script>
  import { getBookList } from "@/api/bookApi.js"
  export default {
    data() {
        return {
		  pageData: {
			  page: 1,
			  pageSize: 5,
			  total: 0
		  },
		  bookList: [],
		  loading: false
        }
    },
	methods: {
		scrollToLower(){
			if((this.pageData.page * this.pageData.pageSize) <= this.total){
				this.pageData.page += 1;
				this.getPages();
			}else{
				uni.showToast({
				  title: '没有更多数据了',
				  icon: 'none',
				  duration: 2000
				})
			}
		},
	     getPages(){
			 this.loading = true;
			 getBookList(this.pageData.page,this.pageData.pageSize).then(res=>{
				 if(res.state == 200) {
					 this.total = res.data.total;
				     this.bookList = [...this.bookList,...res.data.records];
					 this.loading = false;
				 }
			 })
		 }
	},
    mounted() {
		this.pageData = {
		  page: 1,
		  pageSize: 5,
		  total: 0
	    }
		this.getPages();
    }
  }
</script>

<style scoped>
	.box{
		height: 50vh;
		width: 100vw;
		overflow: auto;
	}
	.management{
		width: 100vw;
		height: 40%;
		border-bottom: 1px solid black;
	}
</style>

首先我们肯定要引入bookApi.js中的getBookList
然后在mounted 页面渲染完成的生命周期中执行将分页的数据回归到第一页每页展示五条
然后先调用一次getPages 获取第一页数据

然后 scroll-view标签的scrolltolower可以监听元素滚动到底
每次滚动到底都会触发scrollToLower
但如果你不控制一下用户滚动到底一次就会触发一次很可能重复请求所以我们写了个loading
等接口还没返回时不让他乱动
然后我们的计算是 total接的是分页接口返回的数据总条数这个计算大家可以自己去理解不难的
就是没有数据我们弹出提示没有更多数据了
因为是滚动分页我们数据肯定是都要展示
所以我们不能直接

this.bookList = res.data.records;

这样你会把原来的数据覆盖掉我们用的是 JS中ES6的数组合并方法将bookList原有的数据和res.data.records合并在一起

那我们运行项目看看效果
H5肯定是最稳妥的
uni-app滚动分页兼容(App 小程序 H5),uni-app,小程序,android
然后小程序显然也很给力

最后手机App也是没有任何问题
文章来源地址https://www.toymoban.com/news/detail-595135.html