mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 21:29:31 +08:00
修改：优化列表动画效果
This commit is contained in:
小莫唐尼
+204
-200
@@ -74,7 +74,7 @@
|
||||
</tm-flowLayout>
|
||||
<block v-else>
|
||||
<block v-for="(item, index) in dataList" :key="index">
|
||||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||||
<tm-translate animation-name="fadeUp" :wait="calcAniWait(index)">
|
||||
<view class="round-3 shadow-2 overflow white mb-24">
|
||||
<tm-images :previmage="false" :src="item.image" @click="fnPreview(item)"></tm-images>
|
||||
<view class="pa-24 text-size-m">
|
||||
@@ -107,221 +107,225 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
||||
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
|
||||
import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
|
||||
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
|
||||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||||
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
|
||||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||||
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
||||
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
|
||||
import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
|
||||
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmTranslate,
|
||||
tmFlotbutton,
|
||||
tmTags,
|
||||
tmEmpty,
|
||||
tmIcons,
|
||||
tmImages,
|
||||
tmFlowLayout,
|
||||
tmTabs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBlackTheme: false,
|
||||
loading: 'loading',
|
||||
category: {
|
||||
activeIndex: 0,
|
||||
activeValue: '',
|
||||
list: []
|
||||
},
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0,
|
||||
team: null,
|
||||
keyword: ''
|
||||
},
|
||||
cache: {
|
||||
dataList: [],
|
||||
total: 0
|
||||
},
|
||||
isLoadMore: false,
|
||||
loadMoreText: '',
|
||||
result: {},
|
||||
dataList: []
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
filterTakeTime(val) {
|
||||
return uni.$tm.dayjs(val).format('DD/MM/YYYY');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
globalAppSettings: {
|
||||
deep: true,
|
||||
handler() {
|
||||
// this.isLoadMore = false;
|
||||
// this.queryParams.page = 0;
|
||||
// this.dataList = [];
|
||||
// this.cache.list = [];
|
||||
// this.cache.total = 0;
|
||||
export default {
|
||||
components: {
|
||||
tmSkeleton,
|
||||
tmTranslate,
|
||||
tmFlotbutton,
|
||||
tmTags,
|
||||
tmEmpty,
|
||||
tmIcons,
|
||||
tmImages,
|
||||
tmFlowLayout,
|
||||
tmTabs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBlackTheme: false,
|
||||
loading: 'loading',
|
||||
category: {
|
||||
activeIndex: 0,
|
||||
activeValue: '',
|
||||
list: []
|
||||
},
|
||||
queryParams: {
|
||||
size: 10,
|
||||
page: 0,
|
||||
team: null,
|
||||
keyword: ''
|
||||
},
|
||||
cache: {
|
||||
dataList: [],
|
||||
total: 0
|
||||
},
|
||||
isLoadMore: false,
|
||||
loadMoreText: '',
|
||||
result: {},
|
||||
dataList: []
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
filterTakeTime(val) {
|
||||
return uni.$tm.dayjs(val).format('DD/MM/YYYY');
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('个人图库');
|
||||
this.fnGetCategory();
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.isLoadMore = false;
|
||||
this.queryParams.page = 0;
|
||||
this.fnGetData();
|
||||
},
|
||||
onReachBottom(e) {
|
||||
if (this.result.hasNext) {
|
||||
this.queryParams.page += 1;
|
||||
this.isLoadMore = true;
|
||||
},
|
||||
watch: {
|
||||
globalAppSettings: {
|
||||
deep: true,
|
||||
handler() {
|
||||
// this.isLoadMore = false;
|
||||
// this.queryParams.page = 0;
|
||||
// this.dataList = [];
|
||||
// this.cache.list = [];
|
||||
// this.cache.total = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fnSetPageTitle('个人图库');
|
||||
this.fnGetCategory();
|
||||
},
|
||||
created() {
|
||||
this.fnGetData();
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '没有更多数据了'
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fnOnCategoryChange(index) {
|
||||
this.dataList = [];
|
||||
if (index == 0) {
|
||||
this.queryParams.team = null;
|
||||
} else {
|
||||
this.queryParams.team = this.category.list[index];
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.isLoadMore = false;
|
||||
this.queryParams.page = 0;
|
||||
this.fnToTopPage();
|
||||
this.fnGetData();
|
||||
},
|
||||
fnGetCategory() {
|
||||
this.$httpApi.getPhotoTeams().then(res => {
|
||||
this.category.list = ['全部', ...res.data];
|
||||
});
|
||||
},
|
||||
fnGetData() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
// 设置状态为加载中
|
||||
if (!this.isLoadMore) {
|
||||
this.loading = 'loading';
|
||||
onReachBottom(e) {
|
||||
if (this.result.hasNext) {
|
||||
this.queryParams.page += 1;
|
||||
this.isLoadMore = true;
|
||||
this.fnGetData();
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '没有更多数据了'
|
||||
});
|
||||
}
|
||||
this.loadMoreText = '';
|
||||
this.$httpApi
|
||||
.getPhotoListByPage(this.queryParams)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.loading = 'success';
|
||||
this.result = res.data;
|
||||
if (res.data.content.length != 0) {
|
||||
const _list = res.data.content.map((item, index) => {
|
||||
item['image'] = this.$utils.checkImageUrl(item.thumbnail);
|
||||
item['model'] = 'text';
|
||||
item['takeTime'] = this.$tm.dayjs(item['takeTime']).format('DD/MM/YYYY');
|
||||
return item;
|
||||
});
|
||||
this.fnCacheDataList(_list);
|
||||
if (this.globalAppSettings.gallery.useWaterfull) {
|
||||
this.dataList = _list;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.wafll.pushData(_list);
|
||||
},
|
||||
methods: {
|
||||
fnOnCategoryChange(index) {
|
||||
this.fnResetSetAniWaitIndex();
|
||||
this.dataList = [];
|
||||
if (index == 0) {
|
||||
this.queryParams.team = null;
|
||||
} else {
|
||||
this.queryParams.team = this.category.list[index];
|
||||
}
|
||||
this.queryParams.page = 0;
|
||||
this.fnToTopPage();
|
||||
this.fnGetData();
|
||||
},
|
||||
fnGetCategory() {
|
||||
this.$httpApi.getPhotoTeams().then(res => {
|
||||
this.category.list = ['全部', ...res.data];
|
||||
});
|
||||
},
|
||||
fnGetData() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '加载中...'
|
||||
});
|
||||
// 设置状态为加载中
|
||||
if (!this.isLoadMore) {
|
||||
this.loading = 'loading';
|
||||
}
|
||||
this.loadMoreText = '';
|
||||
this.$httpApi
|
||||
.getPhotoListByPage(this.queryParams)
|
||||
.then(res => {
|
||||
if (res.status == 200) {
|
||||
this.loading = 'success';
|
||||
this.result = res.data;
|
||||
if (res.data.content.length != 0) {
|
||||
const _list = res.data.content.map((item, index) => {
|
||||
item['image'] = this.$utils.checkImageUrl(item.thumbnail);
|
||||
item['model'] = 'text';
|
||||
item['takeTime'] = this.$tm.dayjs(item['takeTime']).format('DD/MM/YYYY');
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.dataList = this.dataList.concat(_list);
|
||||
this.fnCacheDataList(_list);
|
||||
if (this.globalAppSettings.gallery.useWaterfull) {
|
||||
this.dataList = _list;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.wafll.pushData(_list);
|
||||
});
|
||||
} else {
|
||||
this.dataList = this.dataList.concat(_list);
|
||||
}
|
||||
}
|
||||
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
||||
} else {
|
||||
this.loading = 'error';
|
||||
this.waterfall.loading = 'finish';
|
||||
this.loadMoreText = '';
|
||||
}
|
||||
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
||||
} else {
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.loading = 'error';
|
||||
this.waterfall.loading = 'finish';
|
||||
this.loadMoreText = '';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.loading = 'error';
|
||||
this.waterfall.loading = 'finish';
|
||||
this.loadMoreText = '加载失败，请下拉刷新！';
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
// 缓存数据
|
||||
fnCacheDataList(dataList) {
|
||||
if (this.queryParams.page == 0) {
|
||||
this.cache.dataList = dataList;
|
||||
} else {
|
||||
this.cache.dataList = [...this.cache.dataList, ...dataList];
|
||||
}
|
||||
},
|
||||
this.loadMoreText = '加载失败，请下拉刷新！';
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
// 缓存数据
|
||||
fnCacheDataList(dataList) {
|
||||
if (this.queryParams.page == 0) {
|
||||
this.cache.dataList = dataList;
|
||||
} else {
|
||||
this.cache.dataList = [...this.cache.dataList, ...dataList];
|
||||
}
|
||||
},
|
||||
|
||||
// 瀑布流组件点击事件
|
||||
fnOnClick(data) {
|
||||
console.log('点击数据', data);
|
||||
},
|
||||
// 预览
|
||||
fnPreview(item) {
|
||||
const index = this.cache.dataList.findIndex(x => x.id == item.id);
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.cache.dataList.map(x => x.image),
|
||||
indicator: 'number',
|
||||
loop: true
|
||||
});
|
||||
// 瀑布流组件点击事件
|
||||
fnOnClick(data) {
|
||||
console.log('点击数据', data);
|
||||
},
|
||||
// 预览
|
||||
fnPreview(item) {
|
||||
const index = this.cache.dataList.findIndex(x => x.id == item.id);
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.cache.dataList.map(x => x.image),
|
||||
indicator: 'number',
|
||||
loop: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 24rpx;
|
||||
background-color: #fafafa;
|
||||
|
||||
&.is-balck {
|
||||
background-color: #212121;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
padding-top: 24rpx;
|
||||
|
||||
.content-empty {
|
||||
height: 60vh;
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-bottom: 24rpx;
|
||||
background-color: #fafafa;
|
||||
|
||||
&.is-balck {
|
||||
background-color: #212121;
|
||||
}
|
||||
}
|
||||
}
|
||||
.loading-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
}
|
||||
.card {
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
</style>
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
padding-top: 24rpx;
|
||||
|
||||
.content-empty {
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user