151 lines
2.8 KiB
Vue
151 lines
2.8 KiB
Vue
<template>
|
|
<u-list
|
|
:paging-enabled="pagingEnabled"
|
|
:list-id="listId"
|
|
class="flex-1 list"
|
|
:triggered="triggered"
|
|
:lower-threshold="loadmoreoffset"
|
|
:scrollable="scrollable"
|
|
:refresher-enabled="refresh"
|
|
:bounce="bounce"
|
|
:offset-accuracy="offsetAccuracy"
|
|
:scroll-top="scrollTop"
|
|
:scroll-into-view="scrollIntoView"
|
|
@scrolltolower="scrolltolowerHandler"
|
|
@scroll="scrollHandler"
|
|
@refresherrefresh="refresherrefreshHandler"
|
|
@init="initHandler"
|
|
>
|
|
<!-- #ifdef APP-VUE -->
|
|
<refresh
|
|
v-if="refresh"
|
|
class="refresh flex-center"
|
|
:display="triggered ? 'show' : 'hide'"
|
|
@refresh="refresherrefreshHandler"
|
|
>
|
|
<image
|
|
src="@/static/images/loading.gif"
|
|
mode="aspectFit"
|
|
class="loading"
|
|
/>
|
|
<text class="fs-24 text-regular mt-10">
|
|
加载中
|
|
</text>
|
|
</refresh>
|
|
<slot v-if="isPage" /><cell v-else>
|
|
<slot />
|
|
</cell>
|
|
<!-- #endif -->
|
|
<!-- #ifndef APP-NVUE -->
|
|
<slot />
|
|
<!-- #endif -->
|
|
</u-list>
|
|
</template>
|
|
<script>
|
|
// #ifdef APP-NVUE
|
|
|
|
const animation = uni.requireNativePlugin('animation');
|
|
// #endif
|
|
export default {
|
|
name: 'GList',
|
|
props: {
|
|
triggered: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bounce: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
listId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
loadmoreoffset: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
pagingEnabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
refresh: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
refreshWidth: {
|
|
type: String,
|
|
default: '750rpx'
|
|
},
|
|
scrollable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
offsetAccuracy: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
scrollTop: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
scrollIntoView:{
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
refreshHeight: 0
|
|
};
|
|
},
|
|
computed: {
|
|
isPage() {
|
|
return !!this.$listeners.scrolltolower;
|
|
}
|
|
},
|
|
created() {
|
|
// #ifdef APP-NVUE
|
|
const { platform } = uni.getSystemInfoSync();
|
|
if (this.refresh && platform === 'android') {
|
|
this.refreshHeight = uni.upx2px(106);
|
|
}
|
|
// #endif
|
|
},
|
|
methods: {
|
|
scrolltolowerHandler() {
|
|
if (this.isPage) {
|
|
this.$emit('scrolltolower');
|
|
}
|
|
},
|
|
refresherrefreshHandler() {
|
|
this.$emit('refresherrefresh');
|
|
},
|
|
scrollHandler(e) {
|
|
this.$emit('scroll', e - this.refreshHeight);
|
|
},
|
|
initHandler(list) {
|
|
this.$emit('init', list);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.list {
|
|
position: relative;
|
|
}
|
|
.loading {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
.refresh {
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
height: 106rpx;
|
|
}
|
|
.list {
|
|
justify-content: flex-start;
|
|
}
|
|
</style>
|