kpi_web/pages/task/task.vue

<template>
	<view>
		<view >
			<u-subsection :current="tabIndex" :list="subsectionTitle" @change="thumbChange"></u-subsection>
		</view>
		<view id="scroll-post-list">
			<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange" :style="'height: '+svHeight+'px;'">
				<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
					<scroll-view scroll-y="true" show-scrollbar="true" scroll-with-animation scroll-top="0" :style="'overflow: hidden; height: '+svHeight+'px;'"  @scrolltolower="loadMore(index1)">
						<view class="" v-for="iten in tab_data"><br>{{iten}}<br></view>
						<view class="loading-more"  v-if="tab.isLoading || tab.data.length > 4">
							<text class="loading-more-text">{{tab.loadingText}}</text>
						</view>
					</scroll-view>
					
				</swiper-item>
				
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				svHeight:0, //元素的所需高度
				tabIndex:0,	//分段器
				subsectionTitle: ['定性考核', '定量考核'],
				newsList: [],	//数据缓存
				headerVerify:{
					userkey:"",
					token:"",
					userCont:""
				},
				tab_data:['定性考核1', '定量考核2', '定量考核3', '定量考核4', '定量考核5', '定量考核6', '定量考核7', '定量考核8', '定量考核9', '定量考核10', '定量考核11', '定量考核12', '定量考核13', '定量考核14', '定量考核15', '定量考核16', '定量考核17', '定量考核18', '定量考核19', '定量考核20', '定量考核21', '定量考核22', '定量考核23', '定量考核24', '定量考核25', '定量考核26', '定量考核27', '定量考核28', '定量考核29', '定量考核30', '定量考核31', '定量考核32', '定量考核33', '定量考核34'],
				tab_datas:[{
					title: '定性考核1',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核1',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核3',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核3',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核3',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核6',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核7',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核7',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核7',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核7',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核7',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核12',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核13',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核14',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核14',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核16',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核16',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核18',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核18',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核18',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核21',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核22',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核23',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核24',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核25',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核26',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核27',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核28',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核29',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核30',
					roespan: 0,
					hidd: false
				}, {
					title: '定量考核31',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核32',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核33',
					roespan: 1,
					hidd: false
				}, {
					title: '定量考核34',
					roespan: 1,
					hidd: false
				}],
			};
		},
		onLoad() {
			this.subsectionTitle.forEach((tabBar) => {
			    this.newsList.push({
			        data: [],
					page:0,
			        isLoading: false,
			        refreshText: "",
			        loadingText: '加载更多...',
					loadingEnd:false
			    });
			});
		},
		//onReady部分代码（以下代码只能放到 onReady）
		onReady() {
		    let that=this;
		    uni.getSystemInfo({
		        success: function(res) {
		            uni.createSelectorQuery().select("#scroll-post-list").boundingClientRect(function(data) {
		                that.svHeight= (res.windowHeight - data.top);
		            }).exec();
		        }
		    });
		         
		         
		},
		methods:{
			//分段器
			thumbChange(index){
				this.tabIndex = index;
				// let date = this.newsList[index]
			},
			//页面切换
			ontabchange(e) {
			    let index = e.target.current || e.detail.current;
			    // this.switchTab(index);
				console.log(index)
				this.tabIndex = index
			},
			loadMore(e) {
				let _this = this
				_this.newsList[e].isLoading = true
			   console.log(e,"上拉加载")
			},
		}
	}
</script>

<style lang="scss">
	.section_body{
		// height: 100%;
		background-color: #666666;
		    
	}
	.loading-more {
	    align-items: center;
	    justify-content: center;
	    padding-top: 10px;
	    padding-bottom: 10px;
	    text-align: center;
	}
	
	.loading-more-text {
	    font-size: 28rpx;
	    color: #999;
	}
</style>