下拉刷新功能
1.首先要在pages.json里面配置狈究，給你要實(shí)現(xiàn)下拉刷新的頁面增添這個(gè)字段，讓頁面支持下拉刷新盏求。
"enablePullDownRefresh": true
預(yù)覽效果：
我們開啟了下拉刷新的這個(gè)功能抖锥，這時(shí)候是不是就需要去監(jiān)聽一下，下拉刷新這個(gè)動(dòng)作了碎罚。
2. onPullDownRefresh 是一個(gè)處理函數(shù)磅废，監(jiān)聽該頁面用戶下拉刷新事件（和onLoad等生命周期函數(shù)同級(jí)）
onPullDownRefresh () {
console.log('用戶發(fā)生了下拉刷新')
}
效果預(yù)覽：
3.我們來實(shí)現(xiàn)一個(gè)簡單的小功能，就是當(dāng)用戶下拉刷新的時(shí)候更新數(shù)據(jù)荆烈，從而更新視圖拯勉。
代碼：
<template>
<view class="container">
<view v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['蘇軾','蘇轍','蘇洵','柳宗元','辛棄疾']
}
},
onPullDownRefresh () {
this.PoetsList = ['李白','杜甫','李賀','白居易']
}
}
</script>
我們發(fā)現(xiàn)下拉刷新結(jié)束后，圈圈還在轉(zhuǎn)憔购，看著難受是不是宫峦？想要阻止它轉(zhuǎn)圈圈是不是？莫慌玫鸟。
3. uni.stopPullDownRefresh()這個(gè)函數(shù)來了导绷，它就是下拉刷新完成后，視圖已經(jīng)顯示屎飘，不需要再繼續(xù)轉(zhuǎn)圈圈了诵次，它的功能就是阻止我們轉(zhuǎn)圈圈的，停止當(dāng)前頁面下拉刷新枚碗。
onPullDownRefresh () {
this.PoetsList = ['李白','杜甫','李賀','白居易']
uni.stopPullDownRefresh()
}
效果預(yù)覽：
你可能發(fā)現(xiàn)了逾一，下拉刷新后，轉(zhuǎn)圈圈立馬就結(jié)束了肮雨，就這種轉(zhuǎn)瞬即逝一眨眼的效果遵堵，很影響用戶體驗(yàn)是不是？
4.setTimeout()來幫你實(shí)現(xiàn)下拉刷新延遲，實(shí)現(xiàn)完美的用戶微調(diào)體驗(yàn)陌宿。
效果預(yù)覽：
代碼修改：
onPullDownRefresh () {
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李賀','白居易']
uni.stopPullDownRefresh()
},1500)
}
到這里锡足，我們基本可以發(fā)現(xiàn)我們都是用戶手動(dòng)去下拉刷新實(shí)現(xiàn)的，而且還是頁面型的壳坪，那有沒有觸發(fā)型的呢舶得？也是有的哦！
5. uni.startPullDownRefresh(OBJECT) 支持方法調(diào)用爽蝴。開始下拉刷新沐批，調(diào)用后觸發(fā)下拉刷新動(dòng)畫，效果與用戶手動(dòng)下拉刷新一致蝎亚。
我們先來看下效果預(yù)覽：
代碼：
<template>
<view class="container">
<view class="" v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
<button type="primary" @tap="PullDownRefresh()">刷新</button>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['蘇軾','蘇轍','蘇洵','柳宗元','辛棄疾']
}
},
methods: {
PullDownRefresh:function(){
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李賀','白居易']
uni.stopPullDownRefresh()
},1500)
}
}
}
</script>
如果使用方法定義的下拉刷新九孩，那么pages.json中配置的下拉刷新功能的就不需要了。
但方法定義的下拉刷新是否卻了一點(diǎn)東西发框？是不是少了那個(gè)會(huì)動(dòng)會(huì)轉(zhuǎn)轉(zhuǎn)的小圖標(biāo)躺彬？這好像也很影響用戶視覺體驗(yàn)?zāi)兀窟€是有法子的喲梅惯。
6.uni-app的button組件自帶一個(gè)loading的會(huì)轉(zhuǎn)圈圈的屬性宪拥，它是個(gè)布爾值判斷類型，所以需要再data里面定義綁定一個(gè)布爾判斷铣减。
效果預(yù)覽：
代碼：
<template>
<view class="container">
<view class="" v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
<button :loading="isLoad" type="primary" @tap="PullDownRefresh()">刷新</button>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['蘇軾','蘇轍','蘇洵','柳宗元','辛棄疾'],
isLoad:false
}
},
methods: {
PullDownRefresh:function(){
this.isLoad = true //當(dāng)用戶點(diǎn)擊的時(shí)候轉(zhuǎn)圈圈
setTimeout(() => {
this.PoetsList = ['李白','杜甫','李賀','白居易','李清照']
uni.stopPullDownRefresh()
this.isLoad = false //1.5秒后停止轉(zhuǎn)圈圈
},1500)
}
}
}
</script>
通過上面這些案例的剖析江解，你是不是一下子多了很多奇思妙想，趕快行動(dòng)吧徙歼，比如：我們可以實(shí)現(xiàn)下拉刷新視圖了哦犁河！
比如很多的資訊類的app：拿今日頭條app來說，下拉刷新這個(gè)功能魄梯，用戶拉一下,就蹦跶出幾條新聞桨螺，用戶又拉一下。就又蹦跶出幾條新聞酿秸，我們是不是可以實(shí)現(xiàn)了呢灭翔？。
7.綜合案例
待續(xù)
上拉加載功能
onReachBottom 監(jiān)聽頁面上拉觸底辣苏，頁面滾動(dòng)到底部的事件肝箱，常用于下拉下一頁數(shù)據(jù)。與method同級(jí)稀蟋。
實(shí)行條件:頁面要有一定的高度煌张，右側(cè)出現(xiàn)滾動(dòng)條為止,不然沒法子觸發(fā)onReachBottom函數(shù)的。
最直接的方法給大容器增加一個(gè)高度樣式 height:100vh;
<template>
<view class="container">
</view>
</template>
<style lang="scss" scoped>
.container {
height: 100vh;
}
</style>
有了一定的高度退客，我們就可以觸發(fā)它了(與method同級(jí))骏融。
onReachBottom:function(){
console.log('頁面觸底了哦链嘀！')
},
效果預(yù)覽：
既然這個(gè)onReachBottom方法已經(jīng)正常啟用了，那么我們是不是可以實(shí)現(xiàn)一些功能了呢档玻？比如上拉的時(shí)候怀泊，讓頁面加載更多的數(shù)據(jù)呢？嗯呢误趴！就是這個(gè)樣子霹琼。
細(xì)心的我們會(huì)發(fā)現(xiàn)，滾動(dòng)條還未真正觸碰到底部的時(shí)候凉当，就已經(jīng)觸發(fā)了onReachBottom方法枣申？這詩為什么？
我來揭謎底吧纤怒，其實(shí)這一小段距離其實(shí)是受 onReachBottomDistance 這個(gè)頁面配置參數(shù)的影響，默認(rèn)是距離底部50距離天通。
官方解釋：
上面提到了onReachBottomDistance 是頁面配置參數(shù)泊窘，所以理所應(yīng)當(dāng)是在pages.json里面配置了。
找到你所在的頁面進(jìn)行配置像寒。
我們改成當(dāng)前頁面距離底部還有200px的時(shí)候觸發(fā)觸底事件烘豹。
預(yù)覽效果:
我們發(fā)現(xiàn)細(xì)微挪動(dòng)一下還沒開始上挪滾動(dòng)條就觸發(fā)了觸底事件了，效果很明顯诺祸，而這個(gè)效果就是受到onReachBottomDistance 頁面配置參數(shù)的影響携悯。
接下來我們來看一些具體的小案例，實(shí)行上拉預(yù)處理加載更多數(shù)據(jù)筷笨，然后顯示到視圖上憔鬼。
案例代碼：
<template>
<view class="container">
<view class="" v-for="(item,index) in PoetsList" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
PoetsList:['蘇軾','蘇轍','蘇洵','柳宗元','辛棄疾'],
isLoad:false
}
},
onReachBottom:function(){
console.log('頁面觸底了哦！')
//在原有數(shù)據(jù)的基礎(chǔ)上胃夏，無限推送新數(shù)據(jù)轴或，這里僅用來測試用途
this.PoetsList = [
...this.PoetsList,
...['鄭燮','杜牧','王維','陸游','納蘭性德'],
...['劉禹錫','陶淵明']
]
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
width: 750upx;
background-color: #ffff7f;
}
</style>
上面沒看懂的話，也可以用push()方法仰禀，實(shí)現(xiàn)的效果是一樣的照雁。
<script>
export default {
data () {
return {
PoetsList:['蘇軾','蘇轍','蘇洵','柳宗元','辛棄疾'],
PoetsList2:['鄭燮','杜牧','王維','陸游','納蘭性德']
}
},
onReachBottom:function(){
console.log('頁面觸底了哦！')
//在原有數(shù)據(jù)的基礎(chǔ)上答恶，無限推送新數(shù)據(jù)饺蚊，這里僅用來測試用途
for(let poet of this.PoetsList2) {
this.PoetsList.push(poet)
}
},
methods: {
}
}
</script>
