siyu_app/pages/course/famousHallPage.vue

<template>
	
	<view>
	
		<view class="sticky-tabs" :style="{top:tabTop+'px'}">
			<me-tabs v-model="tabIndex" :tabs="mtabs" :height="88" @change="tabChange" :tab-width="134"></me-tabs>
		</view>
		<swiper :style="{'height': swHeight}"   :current="tabIndex" @change="swiperChange" v-if="mtabs.length>0">
			<swiper-item v-for="(tab,i) in mtabs" :key="i">
				<famous-hall-item  ref="mescrollItem" :i="i" :index="tabIndex" :tabs="mtabs" :tipsArr="tipsArr"></famous-hall-item>
			</swiper-item>
		</swiper>
	</view>
</template>


<script>
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
    import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
    import famousHallItem from "./famousHallPageItem.vue" 
	export default {
		mixins: [MescrollCompMixin,MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命周期
		components: {
			famousHallItem
		},
		props: {
			keyword: String,
			cataType:Number,
			i:Number,
			index:Number,
			tabTop:Number,
			mtabs: {
				type: Array,
				default(){
					return []
				}
			},
			tipsArr: {
				type: Array,
				default(){
					return []
				}
			}
		},
		watch:{
			
		},
		data() {
			return {
				swHeight: "800px",
				tabIndex: 0,
			}
		},
		created(){
			
		},
		destroyed() {
			
		},
		mounted() {
			
		},
		methods: {
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
		
		},
		
	}


</script>



<style lang="scss" scoped>

	.item_content{
		background-color: #f7f7f7;
		margin-top: 20rpx;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.top-section{
	    .search-header-nav {
	    	width: 100%;
	    	display: flex;
	    	flex-direction: row;
	    	flex-wrap: nowrap;
	    	align-items: center;
				background: #FF5C03;
	    }
	    .search-header-main {
	    		width: 300rpx;
	    		flex: auto;
	    		overflow: hidden;
	    		margin:0 20rpx;
	    		height: 48rpx;
	    		background: #fff;
	    		border-radius: 24rpx;
	    		padding: 10rpx 20upx;
	    		display: flex;
	    		justify-content: flex-start;
	    		align-items: center;
	    		image{
	    			width: 28upx;
	    			height: 28upx;
	    			margin-right: 16upx;
	    		}
	    		.input-text{
	    			color: #333;
	    			font-size: 24rpx;
	    			height: 48rpx;
	    			line-height:48rpx ;
	    		
	    		}
	    		.uni-input-placeholder{
	    			color:#999;
	    		}
	    }
	}
	

</style>