teaching-uniapp/pages/resource/resource.vue

<template>
	<view class="resource">
		<statusBar :item="navBarData"></statusBar>
		<view class="search">
			<uni-search-bar bgColor="#f0f2f5" placeholder="搜索" cancelButton="none" clearButton="none" :focus="true"></uni-search-bar>
		</view>

		<view class="top">
			<view class="left" @click="phoneLogin" :class="current==0?info1:info2">
				<text>资源库</text>
				<view :class="current==0?yun:info2"></view>
			</view>
			<view class="right" @click="accountLogin" :class="current==1?info1:info2">
				<text>精品慕课</text>
				<view :class="current==1?yun:info2"></view>
			</view>
		</view>
		
		<swiper class="scroll-view-height" :style="{height:swiper+'px'}" @change="swipeIndex" :current="current" :duration="300">
		    <swiper-item>
				<scroll-view scroll-y="true" :style="{height:swiper-20+'px'}">
					<view class="contBox">
						<view class="cont" v-for="i in 10">
							<image src="../../static/yym/Rectangle 1918.png" mode=""></image>
							<view class="tit">
								这里是课程名称课程名称课程名称课程名称课程名称
							</view>
							<view class="teacher">
								主讲老师：舒某某{{swiper}}
							</view>
						</view>
					</view>
				</scroll-view>
					
		    </swiper-item>
			
		    <swiper-item>
				<scroll-view scroll-y="true" :style="{height:swiper+'px'}">
					<view class="contBox">
						<view class="cont" v-for="i in 10">
							<image src="../../static/yym/Rectangle 1918.png" mode=""></image>
							<view class="tit">
								这里是课程名称课程名称课程名称课程名称课程名称
							</view>
							<view class="teacher">
								主讲老师：舒某某{{swiper}}
							</view>
						</view>
					</view>
				</scroll-view>
		  </swiper-item>
		</swiper>


	
	</view>
</template>

<script>
export default {
	data() {
		return {
				navBarData: {
					title: '资源库',
					btn: 0
				},

				current:0,//登录方式切换
				
				info1:'info1',  //类名
				info2:'info2',
				yun:'yun',
				
				swiper:0


			
			
		};
	},
	methods: {
		toggleActive1() {
			this.isActive1 = true;
			this.isActive2 = false;
			this.tab = true;
		},
		toggleActive2() {
			this.isActive1 = false;
			this.isActive2 = true;
			this.tab = false;
		},
		swipeIndex(index){
			this.current=index.detail.current;			
		},
		phoneLogin(){
			this.current=0
		},
		accountLogin(){
			this.current=1
		},
	},
	onReady() {
		 uni.createSelectorQuery().select('.uni-tabbar').boundingClientRect((rect) => {
		    if (rect) {
		      const tabBarHeight = rect.height;
		      console.log('底部导航栏高度:', tabBarHeight);
		    }
		  }).exec();
	},
	onLoad() {
		// console.log(this.screenHeight);
		// console.log(this.navheight);
		console.log(this.tabBarHeight);
		if(this.navheight){
			this.swiper=this.screenHeight-this.navheight-140
		}else{
			this.swiper=this.screenHeight-this.customBar-150			
		}
	}
};
</script>

<style lang="scss" scoped>
	
.resource{
	// background-color: #4a97f2;
	// padding-bottom: 50px;
	// margin-bottom: 50px;
	.search{
		background-color: #ffffff;
		padding: 0 10rpx;
	}
	.top{
		// width: 500rpx;
		display: flex;
		justify-content: space-between;
		margin: auto;
		background-color: #ffffff;
		padding: 10px 150rpx;
		// margin-bottom: 40px;
		font-size: 18px;
		// padding-top: 0;
		.info1{
			font-weight: bold;
			position: relative;
			.yun{
				width: 80rpx;
				height: 0rpx;
				position: absolute;
				left: 50%;
				transform: translate(-50%,-50%);
				box-shadow: 0px 0px 10px 2px #4a97f2;
			}
		}
		.info2{
			color: #666666;
		}
	}
	
	.scroll-view-height{
		// background-color: ;
		// height: 68vh;
		// background-color: red;
		// padding-bottom: 50px;
		.contBox{
			width: 100%;
			padding: 10px 30rpx;
			// height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// background-color: greenyellow;
			margin-bottom: 50px;
			.cont{
				background-color: #ffffff;
				width: 320rpx;
				padding: 20rpx 15rpx;
				border-radius: 10px;
				margin-bottom: 20rpx;
				image{
					width: 100%;
					height: 80px;
				}
				.tit{
					width: 90%;
					margin: 10rpx 0;
					font-weight: bold;
					white-space:normal;
					 display: -webkit-box;
					 word-break: break-all;
					 text-overflow: ellipsis;
					 overflow: hidden;
					 -webkit-box-orient: vertical;
					 -webkit-line-clamp:2;/*设置 需要显示的行数*/
				}
				.teacher{
					font-size: 14px;
					color: #999999;
				}
			}
		}
	}
}

</style>