chanyiUniapp/pages/knowledge/index.vue

<template>
		<view class="konwledge-index">
			<view class="tabs">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'>
					<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''"
					 v-for="(item,index) in tabList" :key="item.id" 
					 @click="tabChange(item,index)">{{item.categoryName}}</view>
				</scroll-view>
			</view>
			<view class="tab-box">
				 <view class="introduce-box acea-row">
					 <view class="left-box"></view>
					 <view class="right-box">
						 <view class="title-txt">{{currentTab.categoryName}}</view>
						 <view class="desc line5">
							 <text>{{currentTab.categoryDetails || '暂无'}}</text>
						 </view>
					 </view>
				 </view>
				 <SecondMenu  
					 :menuList="secondMenu" 
					 :active.sync="active"  
					 @secondMenuClick="secondMenuClick">
				 </SecondMenu>
			 </view>
			 <view class="content-box">
				 <view class="knowledge-list">
					 <view class="knowledge-item acea-row" v-if="articleList.length > 0" v-for="item in articleList" @click="toDetail(item.id)">
						 <view class="img-box">
							 <image :src="item.imageInput" mode="aspectFill"></image>
						 </view>
						 <view class="knowledge-info-box acea-row row-column row-between">
							<view class="line1">
								<view class="title line1">{{item.title}}</view>
								<view class="intro line2">{{item.synopsis}}</view>
							</view>
							<view class="type-box acea-row">
								<view class="tip" :class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'">
									{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}}
								</view>
								<view class="time">{{item.addTime}}</view>
							</view>
						 </view>
					 </view>
					 <view class="no-content" v-if="articleList.length == 0">暂无内容...</view>
				 </view>
			 </view>
		</view>
</template>

<script>
	import SecondMenu from './components/secondMenu.vue';
	import { getArticleCategorys,getArticle } from '@/api/knowledge';
	export default {
		data() {
			return {
				windowWidth:'',
				tabSelect:0,
				scrollLeft:0,
				currentTab:null,
				showView:true,
				isFixedTop:false,
				TabCur: null,
				tabList: [],
				secondMenu:[],
				active:null,
				articleList:[],
				tabHeight:0,
				scrollTop:0
			}
		},
		components: { SecondMenu },
		onShow() {
			console.log(this.tabSelect,'tabSelect')
			
		},
		onLoad(){
			getArticleCategorys().then((res)=>{
				this.tabList = res.data
				this.$set(this, 'currentTab', res.data[0])
				this.$set(this, 'tabList', res.data)
				this.$set(this, 'secondMenu', res.data[0].categoryList)
				if(res.data[0].categoryList.length > 0){
					this.$set(this, 'active', res.data[0].categoryList[0].id)
				} else{
					// this.$set(this, 'tabSelect', 0)
					// this.scrollLeft = 0
				}
			}).then(()=>{
				this.getArticle()
			})
		},
		methods: {
			toDetail(id){
				this.$yrouter.push({
				  path: '/pages/knowledge/detail',
				  query: {
				    id: id,
				  },
				})
			},
			getArticle(){
				uni.showLoading({
					title:'正在加载中...'
				})
				var cid = null;
				this.active == null ? cid = this.currentTab.id : cid = this.active
				getArticle({cid:cid}).then((res)=>{
					uni.hideLoading()
					if(res.success){
						this.articleList = res.data
					}
				})
			},
			tabChange(item,index) {
				this.currentTab = item
				this.tabSelect = index
				this.moveTo(index)
				if(item.categoryList.length > 0){
					this.$set(this, 'active', item.categoryList[0].id)
				}
				this.secondMenu = item.categoryList
				this.getArticle()
			},
			// 将点击元素移动到中间
			moveTo(index) { 
				const query = uni.createSelectorQuery().in(this)
				query.selectAll(`.scroll-item`).boundingClientRect(rect => {
						const windowWidth = this.windowWidth	// 屏幕宽度
						let width = 0
						// 循环获取计算当前点击的标签项距离左侧的距离
						for (let i = 0; i < index; i++) {
							width += rect[i].width
						}
						// 当大于屏幕一半的宽度则滚动，否则就设置位置为0
						if (width > windowWidth / 2) {
							this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
						} else {
							this.scrollLeft = 0
						}
				}).exec()
			},
			secondMenuClick(item){
				this.active = item.id;
				this.getArticle()
			}
		}
	}
</script>

<style scoped lang="less">
.konwledge-index{
	background: #fff;
	min-height: 100%;
	padding-top: 110rpx;
	.tab-box{
		// position: fixed;
		// top: 0;
		background: #fff;
		/deep/.second-menu-box {
			padding: 0 24rpx;
		}
	}
	.tabs{
		width:100%;
		height: 96rpx;
		padding-left: 20rpx;
		position: fixed;
		top: 0;
		background: #fff;
		z-index: 10;
		.scroll-view_H{
			white-space: nowrap;
			width: 100%;
			height: 96rpx;
		}
		.tab-item{
			height: 96rpx;
			line-height: 96rpx;
			display: inline-block;
			margin-right: 40rpx;
			font-size: 32rpx;
			color: #999999;
		}
		.tab-item-active{
			color: #EA533E;
			border-bottom: 2px solid #EA533E;
			font-weight: bold;
		}
	}
	.fixed{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99;
	}
	.content-box{
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.introduce-box{
		width: calc(100% - 60rpx);
		height: auto;
		box-shadow: 0px 6rpx 14rpx 8rpx rgba(255,234,231,0.5);
		border-radius: 8px;
		overflow: hidden;
		margin: 0rpx auto 30rpx;
		padding-bottom: 30rpx;
		padding-left: 10rpx;
		position: relative;
		.right-box{
			width: calc(100% - 16rpx);
			padding: 30rpx 50rpx 0 24rpx;
			font-size: 26rpx;
			color: #999;
			.title-txt{
				font-size: 36rpx;
				font-weight: 500;
				color: #3C464F;
				line-height: 50rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.desc{
				text-indent: 1em;
			}
		}
	}
	.introduce-box::after{
		content: '';
		display: block;
		width: 16rpx;
		height: 100%;
		background: #FAEFED;
		position: absolute;
		left: -1rpx;
		top: 50%;
		border-radius: 50px;
		transform: translateY(-50%);
	}
	
	.knowledge-list{
		width: 100%;
		.no-content{
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			padding: 30rpx 0;
		}
		.knowledge-item{
			border-bottom: 1px solid #ECECEC;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			.img-box{
				width: 204rpx;
				height: 200rpx;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.knowledge-info-box{
				width: calc(100% - 234rpx);
				.title{
					font-size: 32rpx;
					color: #333;
					font-size: 500;
					line-height: 32rpx;
				}
				.intro{
					height: 82rpx;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					margin: 8rpx 0 36rpx;
				}
				.type-box{
					font-size: 24rpx;
					color: #999;
					.tip{
						width: 60rpx;
						font-size: 20rpx;
						color: #FFAD3A;
						height: 34rpx;
						text-align: center;
						line-height: 34rpx;
						background: #fcd391;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
					.free-bg{
						background: #8FB85B;
						color: #D7FFA4;
					}
					.jifen{
						background: #AAC8FA;
						color: #5693F9;
					}
				}
			}
		}
	}
}
.text-black{
	font-size: 32rpx;
}
.text-orange{
	color: #E5270F;
	font-size: 40rpx !important;
	border-color: #E5270F;
}
	
</style>