小程序tab加swiper长列表滚动

<template>
	<view class="index">
		<!-- 自定义头部 -->
		<navBar></navBar>

		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
			:scroll-into-view="scrollInto" scroll-with-animation>
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="tabs-item" :id="tab.id" :data-current="index"
				@click="ontabtap">
				<text class="tabs-item-title" :class="tabIndex==index ? 'tabs-item-title-active' : ''">{{tab.name}}</text>
			</view>
		</scroll-view>

		<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in tabBars" :key="index1">

				<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
					<view class="box" v-for="item,index in 100" :key="index" @click="go">num{{item}}--{{index1}}</view>
					<view class="" :style="{height:50 +mobile+ 'px'}"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import {mapGetters} from 'vuex' //引入mapGetters
	export default {
		data() {
			return {
				tabBars: [],
				tabIndex: 0,
				scrollInto: '',
				newsList: [],
				MAX_CACHE_DATA:100,
				MAX_CACHE_PAGE:3,
				cacheTab: [],
			}
		},
		components:{
			navBar
		},
		onReady() {
		  this.getTabList()
		},
		computed: {
			...mapGetters(['mobile'])
		},
		methods: {
			// 获取tabs列表
			getTabList(){
				const tabbar = [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '军事',
					id: 'junshi'
				}, {
					name: '历史',
					id: 'lishi'
				}, {
					name: '本地',
					id: 'bendi'
				}]
				setTimeout(()=>{
					this.tabBars = tabbar
					this.tabBars.forEach((tabBar) => {
					    this.newsList.push({
					        data: [],
					        isLoading: false,
					        refreshText: "",
					        loadingText: '加载更多...'
					    });
					});
					// this.getList(0);
								
				},30)
			},
			ontabtap(e) {
				
			    let index = e.target.current || e.currentTarget.dataset.current;
			    this.switchTab(index);
			},
			ontabchange(e) {
			    let index = e.target.current || e.detail.current;
				
			    this.switchTab(index);
			},
			loadMore() {

			},
			// 获取新闻列表信息
			getList(index) {
			    let activeTab = this.newsList[index];
			    let list = [];
			    // for (let i = 1; i <= 10; i++) {
			    //     let item = Object.assign({}, newsData['data' + Math.floor(Math.random() * 5)]);
			    //     item.id = this.newGuid();
			        list.push(item);
			    // }
			    activeTab.data = activeTab.data.concat(list);
			},
			switchTab(index) {
				
				// 如果这个当前页的值为0 就重新请求
			    if (this.newsList[index].data.length === 0) {
			        // this.getList(index);
					// 获取数据
			    }
			
			    if (this.tabIndex === index) {
			        return;
			    }
			
			    // 缓存 tabId
				// 判断当前页的数据是否超过了100条
			    if (this.newsList[this.tabIndex].data.length > this.MAX_CACHE_DATA) {
					// cacheTab这个数据里是否有tabIndex
			        let isExist = this.cacheTab.indexOf(this.tabIndex);
					// 如果没有就往cacheTab里添加这个tabIndex的值
			        if (isExist < 0) {
			            this.cacheTab.push(this.tabIndex);
			            //console.log("cache index:: " + this.tabIndex);
			        }
			    }
			     // 设置这tabs的值和swiper的值一致 
			    this.tabIndex = index;
			    this.scrollInto = this.tabBars[index].id;
			
			    // 释放 tabId
				// 如果cacheTab的值超过了3页
			    if (this.cacheTab.length > this.MAX_CACHE_PAGE) {
					// 获取cache的第一项
			        let cacheIndex = this.cacheTab[0];
					// 
			        this.clearTabData(cacheIndex);
			        this.cacheTab.splice(0, 1);
			        //console.log("remove cache index:: " + cacheIndex);
			    }
			},
			clearTabData(e) {
				// 清空这一项的值
			    this.newsList[e].data.length = 0;
			    this.newsList[e].loadingText = "加载更多...";
			},
			go(){
				this.$utils.go('pageChild/pages/index/index','navigateTo')
			}
		}
	}
</script>

<style scoped>
	page {
		    width: 100%;
		    min-height: 100%;
		   
	}

	.index {
		display: flex;
	    flex: 1;
	    flex-direction: column;
	    overflow: hidden;
	    background-color: #ffffff;
	    height: 100vh;
	}

	.scroll-h {
		display: flex;
		flex-direction: row;
		width: 750upx;
		height: 80upx;
		white-space: nowrap;
		overflow: hidden;
	}

	.tabs-item {
		display: inline-block;
		height: 80upx;
		line-height: 80upx;
		padding: 0 30px;
	}

	.tabs-item-title-active {
		color: red;
	}

   .swiper-box {
        flex: 1;
    }

    .swiper-item {
		display: flex;
        flex: 1;
        flex-direction: row;
    }
    .scroll-v {
        flex: 1;
        /* #ifndef MP-ALIPAY */
        flex-direction: column;
        /* #endif */
        width: 750rpx;
		width:100%;
    }
</style>