tmp: 部分代码与UnishopV5结合，但是代码有严重缺陷

pages_tool/article/list.vue

@@ -1,7 +1,21 @@
 <template>
 	<page-meta :page-style="themeColor"></page-meta>
 	<view>
-		<mescroll-uni @getData="getData" ref="mescroll">
+		<scroll-view class="catrgory-nav" scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false" scroll-with-animation="true">
+			<view class="navs">
+				<view v-for="(categoryItem, categoryIndex) in categoryList" :key="categoryIndex" class="uni-tab-item" :id="categoryItem.category_id" :data-current="categoryIndex" @click="ontabtap">
+					<text class="uni-tab-item-title" :class="categoryItem.category_id == categoryId ? 'uni-tab-item-title-active color-base-text' : ''">
+						{{ categoryItem.category_name }}
+					</text>
+				</view>
+			</view>
+		</scroll-view>
+		<!-- #ifdef MP -->
+		<mescroll-uni ref="mescroll" @getData="getData" top="60rpx" >
+		<!-- #endif -->
+		<!-- #ifndef MP -->
+		<mescroll-uni ref="mescroll" @getData="getData" top="86rpx" >
+		<!-- #endif -->
 			<block slot="list">
 				<view class="article-wrap" v-if="list.length">
 					<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
@@ -16,7 +30,7 @@
 									<text class="category-icon"></text>
 									<text>{{ item.category_name }}</text>
 								</block>
-								<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
+								<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'Y-m-d') }}</text>
 							</view>
 						</view>
 					</view>
@@ -25,6 +39,8 @@
 				<loading-cover ref="loadingCover"></loading-cover>
 			</block>
 		</mescroll-uni>
+		<!-- 悬浮按钮 -->
+		<hover-nav></hover-nav>
 
 		<!-- #ifdef MP-WEIXIN -->
 		<!-- 小程序隐私协议 -->
@@ -38,22 +54,71 @@
 	export default {
 		data() {
 			return {
-				list: []
+				list: [],
+				categoryList: [],
+				categoryId: '',
+				scrollLeft: 0,
+				contentScrollW: 0, // 导航区宽度
 			};
 		},
 		components: {
 			nsAdv
 		},
 		onShow() {
+			this.getArticleCategory()
 			this.setPublicShare();
 		},
 		methods: {
+			getScrollW() {
+				const query = uni.createSelectorQuery().in(this);
+
+				query.select('.catrgory-nav').boundingClientRect(data => {
+				// 拿到 scroll-view 组件宽度
+					this.contentScrollW = data.width
+				}).exec();
+
+				query.selectAll('.uni-tab-item').boundingClientRect(data => {
+					
+					let dataLen = data.length;
+					for (let i = 0; i < dataLen; i++) {
+						//  scroll-view 子元素组件距离左边栏的距离
+						this.categoryList[i].left = data[i].left;
+						//  scroll-view 子元素组件宽度
+						this.categoryList[i].width = data[i].width
+					}
+				}).exec()
+			},
+			ontabtap(e) {
+				let index = e.target.dataset.current || e.currentTarget.dataset.current;
+				this.categoryId = this.categoryList[index].category_id;
+				this.scrollLeft = this.categoryList[index].left - this.contentScrollW / 2 + this.categoryList[index].width / 2;
+				this.$refs.loadingCover.show();
+				this.$refs.mescroll.refresh();
+			},
+			/**
+			 * 获取文章分类
+			 */
+			getArticleCategory() {
+				this.$api.sendRequest({
+					url: '/api/article/category',
+					success: res => {
+						if (res.code >= 0) {
+							this.categoryList = [{ category_id: '',category_name: '全部' }]
+							this.categoryList.push(...res.data);
+							this.$nextTick(()=>{
+								this.getScrollW()
+							})
+						}
+					},
+				});
+			},
 			getData(mescroll) {
 				this.$api.sendRequest({
 					url: '/api/article/page',
 					data: {
 						page_size: mescroll.size,
-						page: mescroll.num
+						page: mescroll.num,
+						category_id: this.categoryId
 					},
 					success: res => {
 						let newArr = [];
@@ -128,7 +193,60 @@
 	.empty-wrap {
 		padding-top: 200rpx;
 	}
-
+	
+	.catrgory-nav {
+		height: 80rpx;
+		background: #fff;
+		position: fixed;
+		left: 0;
+		z-index: 998;
+		border-radius: 0px 0px 24rpx 24rpx;
+		.navs {
+			flex-direction: row;
+			/* #ifndef APP-PLUS */
+			white-space: nowrap;
+			/* #endif */
+			display: flex;
+			justify-content: space-around;
+		}
+		
+		.uni-tab-item {
+			padding: 0 30rpx;
+			text-align: center;
+		}
+	
+		.uni-tab-item-title {
+			display: inline-block;
+			height: 80rpx;
+			line-height: 80rpx;
+			border-bottom: 1px solid #fff;
+			flex-wrap: nowrap;
+			/* #ifndef APP-PLUS */
+			white-space: nowrap;
+			/* #endif */
+			text-align: center;
+			font-size: 30rpx;
+			position: relative;
+		}
+	
+		.uni-tab-item-title-active::after {
+			content: ' ';
+			display: block;
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+			height: 6rpx;
+			background: linear-gradient(270deg, var(--base-color-light-9) 0%, var(--base-color) 100%);
+		}
+	
+		::-webkit-scrollbar {
+			width: 0;
+			height: 0;
+			color: transparent;
+		}
+	}
+	
 	.article-wrap {
 		background: #f8f8f8;