<template>
	<view class="wrapper">
		<image class="banner" src="../../../static/bg.png" mode=""></image>
		<view class="tabs">

			<view class="tab-box">
				<newsPage class="page-item"  ref="pageRp"></newsPage>
			</view>
		</view>
	</view>

</template>

<script>
	import newsPage from './itemPage.nvue';
	export default {
		components: {
			newsPage
		},
		data() {
			return {
				newsid: "",
				tabClick: false, // true 表示是两次点击中的第一次点了 tabBar
			}
		},
		onTabItemTap(e) {
		            // tab 点击时执行，此处直接接收单击事件
		            // console.log(e)
		            if (this.tabClick) { // 200ms 内再次点击
		                // 这里就是模拟的双击事件，可以写类似数据刷新相关处理
							this.$refs.pageRp.requestParams.pageIndex = 1;
					this.$refs.pageRp.loadData(true);
		            }
		            this.tabClick = true
		            setTimeout(() => {
		                this.tabClick = false // 200ms 内没有第二次点击，就当作单击
		            }, 200)
		        },
		onNavigationBarButtonTap(e) {
			if(this.$refs.pageRp.dataList.length > 0){
				uni.navigateTo({
					url:'/pages/webview/popupNews',
				})
			}

		},
		onReady() {
			this.$refs.pageRp.loadData();
		},
		methods: {

		}
	}
</script>

<style>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */
	.banner{
		width: 750rpx;
		height: 320rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		border-radius: 15px;
		position: fixed;
		top: 0;
		bottom: 0;
		left:20rpx;
		right: 20rpx;
		background-color: #fff;

	}

	.tab-bar {
		/* #ifdef APP-PLUS */
		width: 750rpx;

		/* #endif */
		height: 42px;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}


	.scroll-view-indicator {
		position: relative;
		height: 2px;
		background-color: transparent;
	}

	.scroll-view-underline {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 0;
		background-color: #007AFF;
	}

	.scroll-view-animation {
		transition-duration: 0.2s;
		transition-property: left;
	}

	.tab-bar-line {
		height: 1px;
		background-color: #cccccc;
	}

	.tab-box {
		flex: 1;
	}
	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.page-item {
		flex: 1;
		flex-direction: row;
		position: absolute;
		overflow: hidden;
		left: 20rpx;
		padding:30rpx;
		top: 5rpx;
		right:20rpx;
		bottom: 0;
	}
</style>
