uni-app App端內置了一個基於 weex 改進的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue頁面，則使用webview渲染；如果使用nvue頁面(native vue的縮寫)，則使用原生渲染。
list是app端nvue專用組件，詳細介紹在官網https://uniapp.dcloud.io/component/list?id=list
1、下拉刷新和觸底加載
<refresh> 組件為容器提供下拉刷新功能，
<refresh> 提供兩個事件=》
pullingdown：被下拉時觸發；refresh ：被下拉完成時觸發（理解為touchend 時）
<list>提供一個事件，和一個屬性設定觸底加載的距離
loadmore：列表滾動到底部將會立即觸發這個事件，你可以在這個事件的處理函數中加載下一頁的列表項。 如果未觸發，請檢查是否設置了loadmoreoffset的值，建議此值設置大於0；
loadmoreoffset：觸發 loadmore 事件所需要的垂直偏移距離（設備屏幕底部與 list 底部之間的距離）；
<template>
<view class="list">
<!-- list組件必須顯示的指定寬高，或者使用定位方式 -->
<list class="list" loadmoreoffset="10" @loadmore="loadMore" ref="list">
<refresh
:display="refreshing ? 'show' : 'hide'"
@refresh="onrefresh"
@pullingdown="onpullingdown"
@click="reFresh">
<view class="loading-more">
<loading-indicator style="margin-right:15px;"></loading-indicator>
<text class="loading-more-text">{{refreshText}}</text>
</view>
</refresh>
<cell v-for="(item,index) in list"
:key="index"
:ref="'cell'+index">
<view class="cell">
<text>{{item}}</text>
</view>
</cell>
<cell v-if="list.length>8 && !noData">
<view class="loading-more">
<loading-indicator style="margin-right:15px;"></loading-indicator>
<text class="loading-more-text">加載中...</text>
</view>
</cell>
<cell v-if="noData">
<view class="loading-more">
<text class="loading-more-text">沒有更多數據了</text>
</view>
</cell>
</list>
<view class="top" style="bottom: 150px;" @click="reLoad">
<text>刷新</text>
</view>
<view class="top" @click="clickTop()">
<view style="background-color: pink;" @click.stop="toTop(1,$event)">
<text>toTop</text>
</view>
</view>
</view>
</template>
<script>
//只在nvue 頁面有該模塊
const dom = weex.requireModule('dom')
export default {
data() {
return {
list: [1, 2, 3, 4, 5, 6,7,8],
noData:false,
refreshText:'',
loading:false,
refreshing:false
}
},
methods: {
//開始下拉時
onpullingdown(e){
//當正在刷新的時候直接返回
if(this.refreshing){
return;
}
if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
//當下拉的距離大於fresh組件的高度
this.refreshText = "釋放立即刷新";
} else {
this.refreshText = "下拉可以刷新";
}
},
onrefresh(){
if(this.loading){
//當正在調用接口獲取數據時，此時的下拉不做任何操作
return;
}
this.refreshText="正在刷新...";
//刷新數據
//模擬接口延遲
this.loading = true;
this.refreshing = true;
//刷新成功
setTimeout(()=>{
this.list = [1,2,3,4,5,6,7,8];
this.loading = false;
this.refreshing = false;
this.loadErr = false;
},300);
//模擬刷新失敗
// setTimeout(()=>{
// this.loading = false;
// this.refreshText = '刷新失敗，點擊重試';
// this.loadErr = true;
// },300);
},
reFresh(){
if(!this.loadErr){
return;
}
this.refreshText="正在刷新...";
setTimeout(()=>{
this.list = [1,2,3,4,5,6,7,8];
this.loading = false;
this.refreshing = false;
this.loadErr = false;
},300);
},
loadMore(){
let data = [];
let v = this.list[this.list.length-1];
if(v==200){
this.noData = true;
return;
}
for(let i = 0;i<4;i++){
v++;
data.push(v);
}
//模擬接口返回時間延遲
setTimeout(()=>{
this.list = this.list.concat(data);
},300);
},
reLoad(){
//當屏幕已經向下滾動，此時刷新，如果數據超過一屏，此時滾動條不會自動置頂
this.list = [1,2,3,4,5,7,8,9];
this.scrollElement(0);
},
toTop(params,e){
//nvue下阻止事件冒泡的方法
e.stopPropagation()
this.scrollElement(0);
},
//滾動到某一個元素
scrollElement(index){
if (this.$refs['cell'+index]) {
//滑動到頂部
let el = this.$refs['cell'+index][0];
dom && dom.scrollToElement(el, {
// animated:false //滾動的動畫，默認有
});
}
},
clickTop(e){
uni.showToast({
title:'事件冒泡了'
})
}
}
}
</script>
<style>
.list{
position: absolute;
top:0;
bottom: 0;
left:0;
right: 0;
/* #ifndef APP-PLUS */
display: flex;
flex-direction: column;
/* #endif */
}
.cell {
padding-left: 20px;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 40px;
background-color: #F9D7EA;
margin-top: 15px;
}
.loading-more {
align-items: center;
justify-content: center;
padding-top: 14px;
padding-bottom: 14px;
text-align: center;
flex-direction: row;
width:750rpx;
}
.loading-more-text {
font-size: 28upx;
color: #999;
}
.top{
position: fixed;
right:5px;
background-color: #FFFFFF;
bottom:50px;
width:80px;
height: 80px;
border-radius: 50%;
box-shadow: 0 1px 20px 0 rgba(195, 195, 195, 0.5);
align-items: center;
justify-content: center;
}
</style>
注：如果上拉加載數據后，再下拉刷新，然后無法再觸發loadmore事件時，請重置loadmore
loadMore(e) { //loadmore 事件中重置 this.$refs["list"].resetLoadmore();
//下一頁操作
...
}
如果下拉刷新的組件不回彈回去，試試延遲設置hide