cma_search/client_mp/pages/exam/exam.vue

<template>
	<view class="tabs">
	    <scroll-view 
		id="tab-bar" 
		class="scroll-h" 
		:scroll-x="true" 
		:show-scrollbar="false" 
		>
	        <view v-for="(tab,index) in tabBars" 
			:key="tab.id" class="uni-tab-item" 
			:id="tab.id" :data-current="index" 
			@click="ontabtap">
	            <text class="tab-item-title" 
				:class="tabIndex==index ? 'tab-item-title-active' : ''">{{tab.name}}</text>
	        </view>
	    </scroll-view>
	    <view class="line-h"></view>
		<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore()">
			<uni-list>
			    <uni-list-item direction="column" :key="item.id" v-for="(item, index) in examList">
			        <template v-slot:header>
			            <view class="uni-title"><view class="blue_line"></view>{{item.name}}</view>
			        </template>
			        <template v-slot:body>
			            <view class="uni-list-box">
			                <view class="uni-content">
			                    <view class="uni-title-sub uni-ellipsis-2">开启时间: {{item.open_time}}</view>
			                    <view class="uni-title-sub uni-ellipsis-2">结束时间: {{item.close_time}}</view>
			                    <view class="uni-note">考试机会: {{item.chance}}次</view>
			                </view>
			            </view>
			        </template>
			        <template v-slot:footer>
			            <view class="uni-footer">
							<u-button v-if="tabIndex==0"  type="primary" @click="attendExam(item)">我要参加</u-button>
							<!-- <u-button size="mini" type="info" >成绩排名</u-button> -->
			            </view>
			        </template>
			    </uni-list-item>
			</uni-list>
			<!-- <view class="bottomText" v-if="isLoading">{{loadingText}}</view> -->
			<view v-if="isBottom" class="bottomText"> 已经到底了</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				query:{
					can_attend:true,
					is_my:true,
					page:1
				},
				examList: [],
				tabBars:[
					{name:'可参与',
					id:'my'},
					{name:'我的',
					id:'attend'},
				],
				tabIndex:0,
				examsList:[
					{},{}
				],
				isLoading: false,
				refreshText: "",
				loadingText: '加载中...',
				isBottom:false,
				// bottomShow:false,
			}
		},
		onLoad() {
			setTimeout(()=>{
			  this.getExamList(0);
			},350)
		},
		
		methods: {
			//获取考试列表
			getExamList(index){
				let that = this;
				if(index==0){
					that.query.can_attend = true;
				}else{
					that.query.can_attend = false;
				}
				that.isLoading = true;
				that.isBottom = true;
				that.$u.api.getExamList(that.query).then(res=>{
					console.log(res)
					if(res.data&&res.data.results.length>0){
						that.isBottom = false;
						console.log('u有数据')
						that.examList = that.examList.concat(res.data.results)
					}
				})
			},
			//参加考试
			attendExam(val){
				console.log(val)
				uni.setStorageSync('currentExam', val)
				uni.navigateTo({
					url:"/pages/exam/preview"
				})
			},
			//切换列表
			ontabtap(e) {
				console.log('ontabtap')
				this.query.page = 1;
				this.examList = [];
				this.isBottom=false;
				// this.bottomShow=false;
			    let index = e.target.dataset.current || e.currentTarget.dataset.current;
			    this.switchTab(index);
			},
			//列表变动
			switchTab(index) {
				if (this.tabIndex === index) {
				    return;
				}
				this.tabIndex = index;
				this.getExamList(index)
			},
			
			onpullingdown(e) {
			    
			},
			//获取更多
			loadMore() {
				if(!this.isBottom){
					this.query.page +=1;
					setTimeout(() => {
					    this.getExamList(this.tabIndex);
					}, 100)
				}
				// else{
				// 	this.bottomShow = true;
				// }
				
			},
		}
	}
</script>

<style>
 .tabs {
     flex: 1;
     flex-direction: column;
     overflow: hidden;
     background-color: #ffffff;
     /* #ifndef APP-PLUS */
     height: 100vh;
     /* #endif */
 }
 
 .scroll-h {
     width: 750rpx;
 	/* #ifdef H5 */
 	width:100%;
 	/* #endif */
 	height: 80rpx;
     flex-direction: row;
     /* #ifndef APP-PLUS */
     white-space: nowrap;
     /* #endif */
	 position: absolute;
	 top: 0;
	 z-index: 10;
 }
 
 .line-h {
     height: 1rpx;
     background-color: #cccccc;
 }
 .uni-tab-item {
     /* #ifndef APP-PLUS */
     display: inline-block;
     /* #endif */
     flex-wrap: nowrap;
     padding-left: 34rpx;
     padding-right: 34rpx;
 }
 
 .tab-item-title {
     color: #555;
     font-size: 30rpx;
     height: 80rpx;
     line-height: 80rpx;
     flex-wrap: nowrap;
     /* #ifndef APP-PLUS */
     white-space: nowrap;
     /* #endif */
 }
 
 .tab-item-title-active {
     color: #007AFF;
 }
 .list{
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 5;
	 box-sizing: border-box;
	 padding: 80rpx 0 20rpx 0;
 }
 .uni-list-item{
	     width: 96%;
	     margin: 10px auto;
	     border: 1px solid #efefef;
	     border-radius: 10px;
 }
 .uni-list--border ,.uni-list--border-bottom{
	 display: none;
 }
 .bottomText{
	 font-size: 20rpx;
	 text-align: center;
	 height: 50rpx;
 }
 .blue_line{
 	width: 8rpx;
 	    height: 40rpx;
 	    background: #2581e4;
 	    display: inline-block;
 	    margin-right: 6rpx;
 }
</style>