Răsfoiți Sursa

优化:重写友链列表,兼容微信小程序;
优化:解决分类功能滚动回弹问题;

小莫唐尼 3 ani în urmă
părinte
comite
e05d0d7ce5
2 a modificat fișierele cu 49 adăugiri și 31 ștergeri
  1. 16 3
      pages/tabbar/category/category.vue
  2. 33 28
      pages/tabbar/links/links.vue

+ 16 - 3
pages/tabbar/category/category.vue

@@ -23,6 +23,10 @@
 					@refresherrefresh="fnGetData(true)"
 					@scrolltolower="fnGetData(false)"
 					@scroll="fnOnScroll"
+					@touchmove.stop
+					@touchstart="fnOnTouchStart"
+					@touchend="fnOnTouchEnd"
+					@touchcancel="fnOnTouchEnd"
 				>
 					<view v-if="dataList.length == 0" class="article-empty flex flex-center">
 						<tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无文章~"></tm-empty>
@@ -78,6 +82,8 @@ export default {
 			isLoadMore: false,
 			loadMoreText: '',
 			scrollTop: 0,
+			tempScrollTop: 0,
+			scrollTimeout: null,
 			triggered: false
 		};
 	},
@@ -181,9 +187,7 @@ export default {
 			});
 		},
 		fnOnScroll(e) {
-			throttle(() => {
-				this.scrollTop = e.detail.scrollTop;
-			}, 1000);
+			this.tempScrollTop = e.detail.scrollTop;
 		},
 		fnToTopScroll() {
 			uni.pageScrollTo({
@@ -191,6 +195,15 @@ export default {
 				duration: 500
 			});
 			this.scrollTop = 0;
+			this.tempScrollTop = 0;
+		},
+		fnOnTouchStart() {
+			clearTimeout(this.scrollTimeout);
+		},
+		fnOnTouchEnd() {
+			this.scrollTimeout = setTimeout(() => {
+				this.scrollTop = this.tempScrollTop;
+			}, 500);
 		}
 	}
 };

+ 33 - 28
pages/tabbar/links/links.vue

@@ -7,7 +7,7 @@
 			<tm-skeleton model="listAvatr"></tm-skeleton>
 			<tm-skeleton model="listAvatr"></tm-skeleton>
 		</view>
-		<block v-else>
+		<view v-else class="bg-white">
 			<!-- 空数据 -->
 			<view v-if="result.length == 0" class="empty flex flex-center"><tm-empty icon="icon-shiliangzhinengduixiang-" label="啊偶,博主还没有朋友呢~"></tm-empty></view>
 
@@ -28,44 +28,49 @@
 						</view>
 					</tm-translate>
 				</block>
-				<!-- 返回顶部 -->
-				<tm-flotbutton @click="fnToTopPage" size="m" icon="icon-angle-up"></tm-flotbutton>
 			</view>
 
 			<!-- 如果大于一个分组:使用联系人的索引形式 result.length > 1 -->
-			<block v-else-if="result.length > 1">
-				<tm-quickIndex :list="result">
-					<template #cell="{ data }">
+			<block v-else>
+				<block v-for="(team, index) in result" :key="index">
+					<view class="grey-lighten-4 text  text-size-s text-weight-b px-32 py-12">{{ team.title }}</view>
+					<block v-for="(link, linkIndex) in team.children" :key="link.id">
 						<!-- 艳丽版本 -->
-						<view v-if="!globalAppSettings.links.useSimple" class="info flex pa-36  border-b-1" @click="fnOnLinkEvent(data.item)">
-							<view class="link-logo">
-								<cache-image class="link-logo_img" radius="12rpx" :url="data.item.logo" :fileMd5="data.item.logo" mode="aspectFill"></cache-image>
-							</view>
+						<view
+							v-if="!globalAppSettings.links.useSimple"
+							class="info flex pa-36"
+							:class="{ 'border-b-1': linkIndex != team.children.length - 1 }"
+							@click="fnOnLinkEvent(link)"
+						>
+							<view class="link-logo"><cache-image class="link-logo_img" radius="12rpx" :url="link.logo" :fileMd5="link.logo" mode="aspectFill"></cache-image></view>
 							<view class="flex flex-col pl-30 info-detail">
-								<view class="link-card_name text-size-l text-weight-b text-red">{{ data.item.name }}</view>
+								<view class="link-card_name text-size-l text-weight-b text-red">{{ link.name }}</view>
 								<view class="poup-tag ml--10 mt-6">
-									<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">ID:{{ data.item.id }}</tm-tags>
-									<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ data.item.team }}</tm-tags>
+									<tm-tags color="bg-gradient-amber-accent" :shadow="0" size="s" model="fill">ID:{{ link.id }}</tm-tags>
+									<tm-tags color=" bg-gradient-light-blue-lighten" :shadow="0" size="s" model="fill">{{ link.team }}</tm-tags>
 								</view>
-								<view class="link-card_desc text-overflow text-size-s mt-4">博客简介:{{ data.item.description || '这个博主很懒,没写简介~' }}</view>
+								<view class="link-card_desc text-overflow text-size-s mt-4">博客简介:{{ link.description || '这个博主很懒,没写简介~' }}</view>
 							</view>
 						</view>
 						<!-- 简洁版本 -->
-						<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(data.item)">
-							<image class="logo shadow-6" :src="data.item.logo" mode="aspectFill"></image>
+						<view v-else class="link-card flex ml-24 mr-24 pt-24 pb-24" @click="fnOnLinkEvent(link)">
+							<image class="logo shadow-6" :src="link.logo" mode="aspectFill"></image>
 							<view class="info pl-24">
-								<view class="name text-size-g">{{ data.item.name }}</view>
-								<view class="desc mt-12 text-size-s text-grey-darken-1">{{ data.item.description }}</view>
+								<view class="name text-size-g">{{ link.name }}</view>
+								<view class="desc mt-12 text-size-s text-grey-darken-1">{{ link.description }}</view>
 								<view v-if="false" class="link mt-12 text-size-m text-grey-darken-1">
 									<text class="iconfont icon-link mr-6 text-size-s"></text>
-									{{ data.item.url }}
+									{{ link.url }}
 								</view>
 							</view>
 						</view>
-					</template>
-				</tm-quickIndex>
+					</block>
+				</block>
 			</block>
 
+			<!-- 返回顶部 -->
+			<tm-flotbutton v-if="linkTotal > 10" color="light-blue" @click="fnToTopPage" size="m" icon="icon-angle-up"></tm-flotbutton>
+
 			<!-- 详情弹窗 -->
 			<tm-poup v-model="detail.show" :width="640" height="auto" position="center" :round="6">
 				<view class="poup pa-36">
@@ -90,7 +95,7 @@
 					<view class="mt-24"><tm-images :width="568" :round="2" :src="caclSiteThumbnail(detail.data.url)" mode="aspectFill"></tm-images></view>
 				</view>
 			</tm-poup>
-		</block>
+		</view>
 	</view>
 </template>
 
@@ -101,7 +106,6 @@ import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vu
 import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
 import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
 import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
-import tmQuickIndex from '@/tm-vuetify/components/tm-quickIndex/tm-quickIndex.vue';
 import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
 
 import { GetRandomNumberByRange } from '@/utils/random.js';
@@ -114,7 +118,6 @@ export default {
 		tmTags,
 		tmEmpty,
 		tmImages,
-		tmQuickIndex,
 		tmPoup
 	},
 	data() {
@@ -129,7 +132,8 @@ export default {
 			detail: {
 				show: false,
 				data: {}
-			}
+			},
+			linkTotal: 0
 		};
 	},
 	computed: {
@@ -158,6 +162,7 @@ export default {
 			return this.$haloConfig.colors[_r];
 		},
 		fnGetData() {
+			this.linkTotal = 0;
 			this.loading = 'loading';
 			uni.showLoading({
 				mask: true,
@@ -169,12 +174,12 @@ export default {
 					if (res.status == 200) {
 						console.log('请求结果:');
 						console.log(res);
-						let resData = res.data;
 						// 处理数据
-						const _result = resData.map(item => {
+						const _result = res.data.map(item => {
 							const _team = item.team || '未分组';
 							const _firstChart = _team ? _team.substring(0, 1) : '';
 							const _links = item.links.map(link => {
+								this.linkTotal += 1;
 								link.logo = this.$utils.checkAvatarUrl(link.logo);
 								return link;
 							});
@@ -266,7 +271,7 @@ export default {
 		// height: 126rpx;
 		width: 80rpx;
 		height: 80rpx;
-		border-radius: 50%;
+		border-radius: 12rpx;
 		border: 6rpx solid #ffffff;
 		box-shadow: none;
 	}