因?yàn)槭謾C(jī)端本身屏幕空間不大 所以大家一般都會(huì)選擇用滾動(dòng)分頁

首先 我在根目錄下創(chuàng)建了一個(gè) api目錄 下面創(chuàng)建了一個(gè)bookApi.js
其中寫了一個(gè)請(qǐng)求函數(shù)
getBookList 根據(jù)當(dāng)前頁 page 和 每頁展示多少條 pageSize 獲取數(shù)據(jù)
那么 我的組件代碼是這樣的

<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: '沒有更多數(shù)據(jù)了',
				  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 頁面渲染完成的生命周期中執(zhí)行將分頁的數(shù)據(jù)回歸到 第一頁 每頁展示 五條
然后先調(diào)用一次getPages 獲取第一頁數(shù)據(jù)

然后 scroll-view標(biāo)簽的scrolltolower可以監(jiān)聽元素滾動(dòng)到底
每次滾動(dòng)到底都會(huì)觸發(fā)scrollToLower
但如果你不控制一下 用戶滾動(dòng)到底一次 就會(huì)觸發(fā)一次 很可能重復(fù)請(qǐng)求 所以 我們寫了個(gè)loading
等接口還沒返回時(shí) 不讓他亂動(dòng)
然后我們的計(jì)算是 total接的是分頁接口返回的數(shù)據(jù)總條數(shù) 這個(gè)計(jì)算大家可以自己去理解 不難的
就是沒有數(shù)據(jù) 我們彈出提示 沒有更多數(shù)據(jù)了
因?yàn)槭菨L動(dòng)分頁 我們數(shù)據(jù)肯定是都要展示
所以 我們不能直接

this.bookList = res.data.records;

這樣 你會(huì)把原來的數(shù)據(jù)覆蓋掉 我們用的 是 JS中ES6的數(shù)組合并方法 將bookList原有的數(shù)據(jù)和res.data.records合并在一起

那 我們運(yùn)行項(xiàng)目 看看效果
H5肯定是最穩(wěn)妥的

然后小程序 顯然也很給力

最后 手機(jī)App也是沒有任何問題
文章來源地址http://www.zghlxwxcb.cn/news/detail-595135.html

到了這里，關(guān)于uni-app滾動(dòng)分頁 兼容(App 小程序 H5)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！