uni-app 下拉刷新 上拉加载
<p>首先在page页面设置enablePullDownRefresh属性 激活下拉</p><div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"path": "pages/index/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"style"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"navigationBarTitleText": "uni-app"<span style="color: rgba(0, 0, 0, 1)">,
</span>"enablePullDownRefresh":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p> </p>
<p>index.vue</p>
<div class="cnblogs_code">
<pre><template>
<view>
<view v-<span style="color: rgba(0, 0, 255, 1)">for</span>="(item,index) of newList" :key="index" class="newList"><span style="color: rgba(0, 0, 0, 1)">
{{item}}
</span></view>
<view class="loading">{{loadingTxt}}</view>
</view>
</template>
<script><span style="color: rgba(0, 0, 0, 1)">
let page</span>=1,timer=<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
newList:[],
loadingTxt:</span>'加载更多'<span style="color: rgba(0, 0, 0, 1)">
}
},
onLoad(e) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.getNews()
},
onPullDownRefresh() {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">下拉的生命周期</span>
<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.getNews()
},
onReachBottom() {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">阻止重复加载</span>
<span style="color: rgba(0, 0, 255, 1)">if</span>(timer !== <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">){
clearTimeout(timer)
}
timer</span>=setTimeout(()=><span style="color: rgba(0, 0, 255, 1)">this</span>.getMoreNews(),500<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.getMoreNews()</span>
<span style="color: rgba(0, 0, 0, 1)"> },
methods: {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">下拉刷新事件</span>
<span style="color: rgba(0, 0, 0, 1)"> getNews(){
page</span>=1
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">标题读取样式激活</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.showNavigationBarLoading()
uni.request({
url:</span>'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page=1'<span style="color: rgba(0, 0, 0, 1)">,
success: (res) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.newList=res.data.split('--hcSplitor--'<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">停止下拉样式</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.stopPullDownRefresh()
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">隐藏标题读取</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.hideNavigationBarLoading()
page</span>++<span style="color: rgba(0, 0, 0, 1)">
}
})
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">加载更多的新闻</span>
<span style="color: rgba(0, 0, 0, 1)"> getMoreNews(){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.loadingTxt='加载中'<span style="color: rgba(0, 0, 0, 1)">
uni.showNavigationBarLoading()
uni.request({
url:</span>'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page='+<span style="color: rgba(0, 0, 0, 1)">page,
success: (res) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(res.data===<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.loadingTxt="已经加载全部"
<span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">
}
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.newList=<span style="color: rgba(0, 0, 255, 1)">this</span>.newList.concat(res.data.split('--hcSplitor--'<span style="color: rgba(0, 0, 0, 1)">))
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.newList=[...this.newList,res.data.split('--hcSplitor--')]</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">停止下拉样式</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.stopPullDownRefresh()
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">隐藏标题读取</span>
<span style="color: rgba(0, 0, 0, 1)"> uni.hideNavigationBarLoading()
page</span>++<span style="color: rgba(0, 0, 0, 1)">
}
})
},
}
}
</span></script>
<style><span style="color: rgba(0, 0, 0, 1)">
.newList{
line</span>-<span style="color: rgba(0, 0, 0, 1)">height: 2em;
padding: 20px;
}
.loading{
line</span>-<span style="color: rgba(0, 0, 0, 1)">height: 2em;
text</span>-<span style="color: rgba(0, 0, 0, 1)">align: center;
color: #</span>888<span style="color: rgba(0, 0, 0, 1)">;
margin</span>-<span style="color: rgba(0, 0, 0, 1)">top: 30rpx;
}
</span></style></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/lxz-blogs/p/12599475.html
頁:
[1]