您好,登錄后才能下訂單哦!
這篇文章主要介紹“uniapp怎么實現(xiàn)下拉刷新與上拉觸底加載功能”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強(qiáng),希望這篇“uniapp怎么實現(xiàn)下拉刷新與上拉觸底加載功能”文章能幫助大家解決問題。
這個用于監(jiān)聽該頁面用戶下拉刷新事件。
首先在pages.json中需要下拉刷新的頁面,在style配置enablePullDownRefresh為true就可以了(要在 pages.json 里,找到的當(dāng)前頁面的pages節(jié)點(diǎn),并在 style 選項中開啟 enablePullDownRefresh),然后在具體頁面使用onPullDownRefresh回調(diào)函數(shù)就可以了。最后在當(dāng)處理完數(shù)據(jù)刷新后,uni.stopPullDownRefresh 可以停止當(dāng)前頁面的下拉刷新。
pages.json:
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "PULLANDREACHDEMO", "enablePullDownRefresh": true // 開啟下拉刷新 } }
// 下拉刷新 async onPullDownRefresh() { console.log('下拉刷新-->>') this.dataListAll = await this.loadmore() this.getPageData() uni.stopPullDownRefresh() // 停止當(dāng)前頁面刷新 },
只需要在style配置onReachBottomDistance 就可以了。頁面上拉觸底事件觸發(fā)時距頁面底部距離,單位只支持px
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "PULLANDREACHDEMO", "enablePullDownRefresh": true, // 下拉刷新 "onReachBottomDistance": 50 // 頁面上拉觸底事件觸發(fā)時距頁面底部距離 觸底加載 } }
然后頁面中的回調(diào)
// 觸底加載 onReachBottom() { console.log('觸底加載-->>') this.status = 'loading' setTimeout(() => { this.status = 'nomore' this.pageNo++ this.getPageData() }, 500) },
<template> <view class="index"> <view v-for="(item, index) in dataList" :key="index"> <image :src="item.url" mode=""></image> <view>列表長度--{{ index + 1 }}</view> </view> <u-loadmore :status="status" /> </view> </template> <script> export default { data() { return { pageNo: 1, pageSize: 20, dataListAll: [], dataList: [], urls: [ 'https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg', 'https://cdn.uviewui.com/uview/album/5.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg', 'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/8.jpg', 'https://cdn.uviewui.com/uview/album/9.jpg', 'https://cdn.uviewui.com/uview/album/10.jpg', ], status: 'nomore' } }, async onLoad() { this.dataListAll = await this.loadmore() this.getPageData() }, // 下拉刷新 async onPullDownRefresh() { this.dataListAll = await this.loadmore() this.pageNo = 1 this.getPageData() uni.stopPullDownRefresh() }, // 觸底加載 onReachBottom() { this.status = 'loading' setTimeout(() => { this.status = 'nomore' this.pageNo++ this.getPageData() }, 500) }, methods: { // 獲取分頁數(shù)據(jù) getPageData() { let curDataList = this.dataListAll.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize) if(curDataList.length) { this.dataList.push(...curDataList) } }, // 模擬請求 獲取所有數(shù)據(jù) loadmore() { return new Promise((resolve, reject) => { setTimeout(() => { const dataList = [] for (let i = 0; i < 120; i++) { dataList.push({ url: this.urls[uni.$u.random(0, this.urls.length - 1)] }) } resolve(dataList) }, 500) }) } } } </script> <style scoped> .index { width: 100%; height: 100%; /* overflow: auto; overflow-x: hidden; */ } .index > view { width: 100%; height: 120rpx; border-bottom: 1px solid #ccc; padding-left: 15rpx; box-sizing: border-box; display: flex; align-items: center; } .index > view > image { width: 100rpx; height: 100rpx; border-radius: 12rpx; margin-right: 10rpx; } .index > view > view { line-height: 120rpx; font-size: 22rpx; color: #000000; } </style>
關(guān)于“uniapp怎么實現(xiàn)下拉刷新與上拉觸底加載功能”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。