You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
5.6 KiB
241 lines
5.6 KiB
<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>
|
|
|