dou_applet/pages/live/live.vue

<template>
	<view style="background: #FFFFFF;">
		<page-head title="home" background="#ffffff"></page-head>
		<view :style="'padding-top:'+ safeAreaTop+'px'">
			<view class="searchView">
				<i class="iconfont icon-search_icon"></i>
				<input type="text" value="" placeholder="搜直播" />
				<button>搜索</button>
			</view>
			<scroll-view class="rankTabBox" scroll-x="true">
				<view :class="['rankTab',tab == 1 ? 'tab_active' : '']">
					<text class="text">正在直播</text>
					<image src="https://kx-bigdata.oss-cn-beijing.aliyuncs.com/shop_live/live.gif" mode="heightFix" class="img"></image>
				</view>
				<view class="rankTab">
					<text class="text">直播带货榜</text>
				</view>
			</scroll-view>
			<template v-if="showFlag">
				<onLive v-if="tab==1" :height='(safeAreaTop*2 + 420)'></onLive>
			</template>
		</view>
		<tabbar selected='livePage'></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import onLive from './onLive.vue'
	export default {
		components:{
			tabbar,
			onLive
		},
		data() {
			return {
				safeAreaTop:this.$store.state.systemInfo.safeAreaTop,
				tab:1,
				showFlag:false
			}
		},
		async onLoad() {
			await this.$onLaunched;
			this.showFlag = true
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/css/rank.scss'
</style>