college/pages/mobile/topTab.vue

<template>
	<view class="content">

		<!-- 导航 -->
		<view class="nav">
			<view class="leftView" @click="back">
				<image src="../../static/mobile/backBtn.png" mode=""
					style="width: 22rpx; height: 40rpx; padding-left: 24rpx;"></image>
			</view>
			<view class="navTitle">{{topName}}</view>
			<view class="rightView">
				<image src="../../static/mobile/icon_search@2x.png" mode="" class="rightImg" style="margin-left: 40rpx;"
					@click="goSearch"></image>
			</view>
		</view>

		<!-- content -->

		<view class="top" v-if="comment.length != 0">{{comment}}</view>

		<!-- tab -->
		<view class="scrollBg" v-if="bannerArr.length != 0">
			<scroll-view scroll-x="true" @scroll="scroll" :class="{guding:scrollY>0}">
				<view class="tabBg">
					<view v-for="(item,index) in bannerArr" :key="index" @click="tabClick(index)">
						<view class="tabTitle" :class="{tabActive:tabIndex==index}">{{item.name}}</view>

					</view>
				</view>
			</scroll-view>
		</view>


		<!-- item -->

		<view class="itemBg">
			<view v-for="(item,index) in itemArr" :key="index" class="twoItem" :class="{line:index>0}" @click="goList(item)">
				<image :src="item.LogoImg" mode="" class="img2"></image>
				<view class="rightItem">
					<view class="title">{{item.Title}}</view>
					<view class="title2">{{item.Comment}}</view>
				</view>
			</view>
		</view>


		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="itemArr.length==0"></nodata>

		<view class="gotop" @click="gotoTop">
			<image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
		</view>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},
		data() {
			return {
				topName: '',
				topCode: '',
				comment: '',
				page: 1,

				bannerArr: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				itemArr: [],
				tabIndex: 0,
				noMoreShow: false,
				scrollY: '',
			}
		},
		onLoad(opt) {
			this.topName = opt.topName
			this.topCode = opt.topCode
			this.comment = opt.comment
			this.page = 1
			this.getItemData()
			// uni.setNavigationBarTitle({
			// 	title: this.topName
			// })
		},
		methods: {
			gotoTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onPageScroll(e) {

				let that = this;

				if (that.scrollY > e.scrollTop) {

					console.log("向上滚动", e);

				} else {

					console.log("向下滚动", e);

				}

				that.scrollY = e.scrollTop;

			},
			goList(item) {

				// 1分类2文章
				if (item.Type == 1) {
					uni.navigateTo({
						url: 'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Name
					})
				}
				if (item.Type == 2) {
					uni.navigateTo({
						url: 'detail?id=' + item.ID
					})
				}
			},
			getItemData() {
				uni.showLoading({
					title: '加载中'
				})
				let parentCode;
				if (this.tabIndex == 0) {
					parentCode = this.topCode
				} else {
					parentCode = this.bannerArr[this.tabIndex].code
				}
				let url = '/trainingOpenApiV2/categoryPageData',
					params = {
						page: this.page,
						limit: 10,
						parentCode: parentCode,
						topCode: this.topCode
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var data = res.data


					// 处理 undefined和null转为空白字符串

					for (const key in data) {
						data[key] = this.$praseStrEmpty(data[key])
					}



					if (this.page == 1) {
						this.itemArr = data.Items
					} else {
						this.itemArr = this.itemArr.concat(data.Items)
					}
					if (data.Items.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}
					if (this.itemArr.length == 0) {
						this.noMoreShow = false
					}

					this.bannerArr = data.dynamicCol
					let dic = {
						code: this.topCode,
						name: '全部',
					}
					if (this.bannerArr.length != 0) {
						this.bannerArr.splice(0, 0, dic)
					}

				})
			},
			goSearch() {
				uni.navigateTo({
					url: 'search'
				})
			},
			back() {
				uni.navigateBack({

				})
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			tabClick(num) {
				this.tabIndex = num;
				this.page = 1;
				this.getItemData()
			},



			// 下拉刷新 上拉加载更多
			onPullDownRefresh() {
				this.page = 1;
				this.getItemData()

				// this.getDetailData()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			onReachBottom() {
				this.page++;

				this.getItemData()

			}
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding-top: 88rpx;
		padding-bottom: 20rpx;

	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 88rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		border-bottom: #eeeeee 2rpx solid;
	}

	.navTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #3c3c3c;

	}

	.leftView {
		width: 30%;
	}

	.rightView {
		width: 30%;
		display: flex;
		justify-content: flex-end;
		padding-right: 24rpx;
	}

	.rightImg {
		width: 40rpx;
		height: 40rpx;

	}



	.top {

		background-color: #FFFFFF;

		padding: 40rpx 74rpx;


		color: #999999;
		font-size: 24rpx;
		text-align: center;

	}



	.scrollBg {
		background-color: #FFFFFF;
		padding: 0 24rpx;
	}

	.guding {
		padding: 0 24rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		top: 88rpx;
		z-index: 999;
		padding-top: 30rpx;
		border-top: #eeeeee 2rpx solid;
	}

	.scroll-view {
		white-space: nowrap;
	}

	.tabBg {
		display: flex;
		margin-top: 0;
		margin-bottom: 20rpx;
	}



	.tabTitle {
		margin-right: 40rpx;
		font-size: 30rpx;
		color: #3c3c3c;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 60rpx;
		line-height: 60rpx;
	}

	.tabActive {
		color: #FF4F00;
	}

	.itemBg {

		background-color: #FFFFFF;
		padding: 0 24rpx 30rpx;
		
	}

	.twoItem {
		display: flex;

		background-color: #FFFFFF;
		padding: 30rpx 0;
		
	}
	.line {
		border-top: #eeeeee 2rpx solid;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #3c3c3c;
		
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title2 {

		font-size: 24rpx;
		color: #999999;

		//超过固定行数 隐藏
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		margin: 14rpx 0;
	}


	.img2 {
		width: 240rpx;
		height: 135rpx;
		border-radius: 10rpx;
	}

	.rightItem {
		margin-left: 30rpx;
		width: calc(100vw - 300rpx);
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
	.gotopImg {
		width: 100rpx;
		height: 100rpx;
	}
	
	.gotop {
		position: fixed;
		right: 15rpx;
		bottom: 100rpx;
		cursor: pointer;
		z-index: 99999;
	}
</style>