一，小程序 uniApp 下拉刷新 上拉加載

在小程序和uniapp 中 可以通過 <scrooll-view /> 這個(gè)組件來實(shí)現(xiàn) 下拉刷新 和 上拉加載的功能 。官方文檔

1. 通過配置 scroll-x 和 scroll-y 可以實(shí)現(xiàn) 橫向 或縱向的滾動

封裝需要被刷新的組件 ListView
?

封裝需要被刷新的組件 ListView

<view class="list">
   <navigator class="list-item"  v-for="item in listData" :key="item.id" :url="item.url">
       <view>{{item.content}} </view>
    </navigator>
</view>
 <view class="loading-text"> {{ finish ? '沒有更多數(shù)據(jù)~' : '正在加載...' }} </view>

api 需求 一般會返回一個(gè)列表 包含 limit 條數(shù) page 頁數(shù) totalPages 總頁數(shù)(關(guān)鍵就是要這個(gè)總頁數(shù)，去做判斷)

const listData = ref([]) // 存放數(shù)據(jù)

const pageParams ={page:1,limit:10} // 請求分頁數(shù)據(jù)

const finish = ref(false) // 結(jié)束標(biāo)記

// 請求數(shù)據(jù)
async function getData() {
  if (finish.value) {
    return uni.showToast({ icon: 'none', title: '沒有更多數(shù)據(jù)~' })
  }
  const result = await getListDataApi(pageParams)
  guessList.value.push(...result.items)
    // 判斷總頁數(shù)是否大于 請求的分頁條數(shù)
  if (result.totalPages > pageParams.page) {
    // 大于 繼續(xù)累加頁數(shù)
    pageParams.page++
  } else {
     // 小于 停止累加 
    finish.value = true
  }
}

onMounted(() => {
  getData()
})

// 封裝重置數(shù)據(jù)方法 
const resetData = () => {
  pageParams.page = 1
  listData.value = []
  finish.value = false
}

// 拋出方法
defineExpose({
  resetData,
  getData,
})

下拉刷新

1. 配置 refresher-enabled 開啟自定義下拉刷新

2. 配置 refresher-triggered 設(shè)置下拉刷新的狀態(tài) （true 表示下拉刷新已經(jīng)被觸發(fā)，false 表示下拉刷新未被觸發(fā)）

3. 配置 @refresherrefresh 觸發(fā)自定義下拉刷新

4. 下拉刷新的目的 就是 將數(shù)據(jù)重置更新 往往需要的操作 就是將 當(dāng)前頁面的數(shù)據(jù)重置 對于固定的數(shù)據(jù) 只需要重新發(fā)起一次請求 ，對于列表數(shù)據(jù) 只需要清空之前記錄的數(shù)據(jù) ，在頁面更新時(shí)在發(fā)起請求

?
const isTriggered = ref(false) // 下拉刷新狀態(tài)
?
 <scroll-view 
 ? ?scroll-y
 ? ?refresher-enabled
 ?  :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
 >
 ? 
 ? ?<ListView ref="listRef"></ListView>
 ? 
 </scroll-view>
?
?
?
const isTriggered = ref(false) // 下拉刷新狀態(tài)
?
const listRef = ref(null) // 可以訪問組件拋出的數(shù)據(jù)
?
// 觸發(fā)下拉刷新 refresherrefresh
async function onRefresherrefresh() {
 ?// 開啟動畫 (就那三個(gè) ... 的撒幣動畫)
 ?isTriggered.value = true
 ? ?
 ?// 重置猜你喜歡組件數(shù)據(jù)
 ?listRef.value.resetData()
 ?
 ? // 對其他要下拉更新的數(shù)據(jù)發(fā)起請求
 // await Promise.all([getHomeBannerData(), getCategoryData(), getHomeHot()])
?
 ?// 關(guān)閉動畫
 ?isTriggered.value = false
}
?
?

上拉加載

1. enable-back-to-top 雙擊標(biāo)題欄返回頂部

2. @scrolltolower 滾動到底部/右邊，會觸發(fā) scrolltolower 事件文章來源地址http://www.zghlxwxcb.cn/news/detail-755681.html

 <scroll-view 
 ? ?scroll-y
 ? ?enable-back-to-top
 ? ?@scrolltolower="onScrolltolower"
 >
 ? 
 ? ?<ListView ref="listRef"></ListView>
 ? 
 </scroll-view>
?
?
// 上拉加載  只需要 調(diào)用組件中 請求列表數(shù)據(jù)的方法
function onScrolltolower() {
 ?listRef.value.getData()
}

注意點(diǎn)

需要加上下面這幾行 css 不然滾動刷新不觸發(fā)

<style lang="scss">
// css 要加 不然滾動刷新不觸發(fā)
page {
 ?background-color: #f7f7f7;
 ?height: 100%;
 ?overflow: hidden;
}
?
.viewport {
 ?height: 100%;
 ?display: flex;
 ?flex-direction: column;
}
?
.scroll-view {
 ?flex: 1;
 ?overflow: hidden;
}
</style>

到了這里，關(guān)于小程序 uniApp 下拉刷新 上拉加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！