ylrz_scrm_uniapp/pages_course/learning.vue

<template>
	<view class="content" >
		<u-sticky offsetTop="0" customNavHeight="0">
			<view class="grace-page-header" :style="{background:headerBG }">
				<!-- 沉浸式状态栏 -->
				<view class="grace-page-status-bar"></view>
				<!-- 头部核心 -->
				<view class="grace-page-header-nav" id="gracePageHeader" :style="{minHeight:headerHeight+'px', height:headerHeight+'px', overflow:'hidden'}">
					<view class="u-nav-back"  @click="goBack">
						<image class="img" src="@/static/images/course/icon_back_w.png" mode="heightFix"></image>
					</view>
					<view class="grace-header-main">在学课程</view>
				</view>
			</view>
			<view class="nav_bar">
				<view class="search-header-nav" style="box-sizing:content-box;">
					<view class="search-header-main" style="height: auto;">
						<image src="/static/images/course/icon_search.png" mode=""></image>
						<input  class="input-text" @input="inputEvent" type="text" placeholder="搜索课程内容"/>
					</view>
				</view>
			</view>
			<view class="sticky-tabs">
				<me-tabs :value="tabIndex" :tabs="tabs" :height="88" @change="tabChange"></me-tabs>
			</view>
		</u-sticky>
	
	  <!--  <mescroll-uni ref="mescrollRef" style="background-color: #EEEEEE;" :top="88" bottom="20" :down="downOption"  :up="upOption"
	     @down="downCallback"  @up="upCallback"> -->

	        <view class="cont-box">
	             <view class="scroll">
					 <learning-page :i="0" v-show="tabIndex == 0" :index="tabIndex"  ref="mescrollItem0"></learning-page>
					 <favorite-page :i="1" v-show="tabIndex == 1" :index="tabIndex"  ref="mescrollItem1"></favorite-page>
			    </view>
			</view>  	
		
	<!-- 	</mescroll-uni> -->
		
	</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 learningPage from "./learningPage.vue"
	import favoritePage from "./favoritePage.vue"

	export default {
		mixins: [ MescrollCompMixin,MescrollMoreMixin], //mescroll-body写在子组件时
		components: {
			learningPage,
			favoritePage,
		 },
		data() {
			return {
				headerHeight:44,
				navigationBarHeight:44,
				headerBG:"#FF5C03",
				statusBarBG:"none",
				downOption: {   //下拉刷新
				    use:false,
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 空空如也 ~' // 提示
				 		// btnText: '去看看'
				 	}
				},
				tabs: [
					    {dictLabel:'在学课程', num:1, y:0, curPageLen:0, hasNext:false,hasInit:false},
						{dictLabel:'我的收藏', num:1, y:0, curPageLen:0, hasNext:true,hasInit:false}
				],
				tabIndex: 0, // tab下标
				current: 0,
				mtabs:["精选","疾病","名医","养生","用药"],
				fixedTop: false, 
				tabTop:0,
			}
		},
		created() { 
			var system = uni.getSystemInfoSync();
			system.model = system.model.replace(' ', '');
			system.model = system.model.toLowerCase();
			if (system.model.indexOf('iphonex') != -1 || system.model.indexOf('iphone1') != -1) {
				this.iphoneXButtomHeight = uni.upx2px(50);
			}
			this.navigationBarHeight=78;
			//this.tabTop=uni.upx2px(this.statusBarHeight)+58;
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(true);
				var that=this;
				this.requestData();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				this.mescroll.endByPage(1, 1); 
				//this.mescroll.endSuccess(8,false);
				// if (page.num == 1) {
				// 	this.mescroll.endSuccess(8, false);
				// } else {
				// 	this.mescroll.endErr()
				// }
			},
			requestData(){
			    
			},
			// 切换菜单
			tabChange (index) {
				// let preTab = this.tabs[this.preIndex]
				// preTab.y = this.mescroll.getScrollTop()
				// this.preIndex = index;
				this.tabIndex=index;
				// this.mescroll.optUp.use=this.tabIndex>0;
				// let curTab = this.tabs[index];
				// if(index==0){
				// 	this.mescroll.hideUpScroll();
				// 	this.mescroll.removeEmpty();
				// 	this.$nextTick(()=>{
				// 		this.mescroll.scrollTo(curTab.y, 0) // 恢复滚动条的位置
				// 	});
				// }
				this.$nextTick(()=>{
					const el = "mescrollItem"+ this.tabIndex
					let mescrollP=this.$refs[el];
					mescrollP.keyword= this.keyword;
					mescrollP.mescroll.resetUpScroll();
				})
			},
			inputEvent(event){
				// let vForItem = this.$refs["mescrollItem"+this.tabIndex];
				const el = "mescrollItem"+ this.tabIndex
				let mescrollP=this.$refs[el];
				this.keyword=event.detail.value;
				mescrollP.keyword= this.keyword;
				mescrollP.mescroll.resetUpScroll();
			},
			// 页面跳转
			navTo(url) {
				console.log("qxj url:"+url);
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				uni.navigateBack({
					delta:1,
					animationType: 'slide-out-right',
					animationDuration: 200
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
  page{
  	 height: 100%;
	 background-color: #f7f7f7;
  }
 
  .grace-page-header {
		.grace-page-status-bar {
			width: 100%;
			height: var(--status-bar-height);
		}
		.grace-page-header-nav {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
		}
		.grace-header-main {
			width: 300rpx;
			flex: auto;
			overflow: hidden;
			margin:0 20rpx;
			height: 48rpx;
			text-align: center;
			color: #fff;
		}
  }
  
  .nav_bar {
  	height: 44px;
  	width: 100%;
  	background: #FF5C03;
  	padding: 25rpx 0;
  	padding-top: 5rpx;
  	.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: 35rpx;
		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: 50rpx;
		line-height:50rpx ;
		width: 100%;
  	}
  	.uni-input-placeholder{
  	   	color:#999;
  	}  
  }
  .u-nav-back{
		display: flex;
		align-items: center;
		position: absolute;
		left:32rpx;
		.img{
			height: 42upx;
		}
   }
  .scroll{
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
  }

</style>