提交 ff31beac 编写于 作者: H hdx

long-list: 增加 loading

上级 237456bc
<template>
<list-view class="list" ref="listView" @scroll="onScroll" @scrolltolower="loadData">
<list-item class="list-item" v-for="(item, index) in dataList" :key="index">
<list-view class="list" ref="listView" @scrolltolower="loadData">
<template v-for="(item, index) in dataList" :key="index">
<list-item class="list-item">
<view class="list-item-icon">
<image class="list-item-icon-image" :src="item.plugin_img_link"></image>
</view>
......@@ -22,6 +23,11 @@
</view>
</view>
</list-item>
<!-- TODO 暂时这样写才能保证 loading 在 list 底部 -->
<list-item key="loading" v-if="index==dataList.length-1">
<text class="loading">{{loadingText}}</text>
</list-item>
</template>
</list-view>
</template>
......@@ -57,9 +63,23 @@
loading: false,
dataList: [] as ListItem[],
isEnded: false,
loadingError: '',
$currentPage: 0
}
},
computed: {
loadingText() : string {
if (this.loading) {
return "加载中..."
} else if (this.isEnded) {
return "没有更多了"
} else if (this.loadingError.length > 0) {
return this.loadingError
} else {
return ""
}
}
},
mounted() {
uni.loadFontFace({
global: false,
......@@ -105,7 +125,7 @@
}
},
fail: (err) => {
console.log(err)
this.loadingError = err.errMsg
},
complete: () => {
this.loading = false
......@@ -128,10 +148,6 @@
if (nullStarCount > 0) { result += null_code.repeat(nullStarCount) }
return result
},
onScroll(e : ScrollEvent) {
// TODO e.detail.deltaY 值不正确
this.$emit('pageScroll', e.detail.deltaY)
}
}
}
......@@ -215,4 +231,10 @@
color: #008000;
margin-left: auto;
}
.loading {
padding: 20px;
text-align: center;
background-color: #f8f8f8;
}
</style>
\ No newline at end of file
......@@ -10,7 +10,7 @@
<view class="swiper-tabs-item" v-for="(item, index) in swiperList" :id="'swipertab' + index" ref="swipertab"
:key="index" @click="onTabClick(index)">
<text class="swiper-tabs-item-text"
:class="swiperIndex==index ? 'uni-tab-item-title-active' : ''">{{item.name}}</text>
:class="swiperIndex==index ? 'swiper-tabs-item-text-active' : ''">{{item.name}}</text>
</view>
</view>
<view class="swiper-tabs-indicator">
......@@ -22,7 +22,7 @@
<swiper class="swiper-view" ref="swiper" :current="swiperIndex" @change="onSwiperChange"
@transition="onSwiperTransition" @animationfinish="onSwiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
<long-page ref="longPage" :type="item.type" @pageScroll="onSwiperItemPageScroll"></long-page>
<long-page ref="longPage" :type="item.type"></long-page>
</swiper-item>
</swiper>
</view>
......@@ -120,17 +120,9 @@
//console.log(this.$lastSwiperIndex, moveToIndex, offsetX, this.$swiperWidth, percentage);
},
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.$lastSwiperIndex = e.detail.current;
// console.log("onSwiperAnimationfinish", e.detail.current);
// this.setSwiperIndex(e.detail.current, true);
},
onSwiperItemPageScroll(dy : number) {
let top = this.pageScrollTop + dy
if (top > this.$headerHeight) { top = this.$headerHeight }
if (top < 0) { top = 0 }
this.pageScrollTop = top
this.$lastSwiperIndex = e.detail.current
this.setSwiperIndex(e.detail.current, true)
},
queryTabItemsSize() {
this.$swiperTabsRect.length = 0;
......@@ -186,7 +178,8 @@
}
.swiper-list {
height: 100%;
flex: 1;
/* height: 100%; */
}
.swiper-tabs {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册