兼容首页 TAB 超出组件

vedio/App.vue

@@ -19,6 +19,9 @@
 			// #endif
 
 			this.globalData.windowWidth = res.windowWidth;
+			this.globalData.clientHeight = res.windowHeight - this.globalData.windowWidth / 7;
+			this.globalData.tabHeight = this.globalData.windowWidth / 7;
+
 			// 抖音
 			// #ifdef MP-TOUTIAO
 			this.globalData.statusBarHeight = 0;
@@ -51,12 +54,6 @@
 			}
 
 			// checkUpdate(this);
-
-			uni.getSystemInfo({
-				success: (res => {
-					this.globalData.clientHeight = res.windowHeight - 65
-				})
-			});
 		},
 		onShow: function(options) {
 			this.globalData.resetLogin = true
@@ -79,7 +76,8 @@
 			// baseUrl: 'http://test.mints-id.com/camera-api/miniApi',
 			// baseUrl: 'http://192.168.110.71:8301/miniApi',
 			titleButtonWidth: 38,
-			clientHeight: 0,
+			clientHeight: 0,
+			tabHeight: 0,
 			token: '',
 			userId: 0,
 			inviteUId: '',

vedio/components/home/recommendVideo.vue

@@ -6,7 +6,7 @@
 				<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;" @click="tapVideoHover()">
 					<tt-video-player v-if="Math.abs(displayIndex-index)==0" :id="'remmend'+list.vedioId"
 						:album-id="list.douyinAlbumId" :episode-id="list.douyinEpisodeId" :cloud-type="1" version="1"
-						object-fit="contain" :controls="controls" :poster="data.coverImage" :loop="!isplay"
+						object-fit="fill" :controls="controls" :poster="data.coverImage" :loop="!isplay"
 						:autoplay="false" :enable-progress-gesture="false" :show-loading="true" @play="startPlay"
 						:show-fullscreen-btn="false" @controlstoggle="controlstoggle" @ended="ended" />
 				</view>

vedio/pages/home.vue

 <template>
 	<view class="body">
-		<view :style="{'height': clientHeight + 'px'}">
+		<view v-if="clientHeight!=0" :style="{'height': clientHeight + 'px'}">
 			<indexPage v-show="currentPage==0" ref="index" />
 			<recommendPage v-on:showEditBarH="showEditBarH" v-on:changeBottomBarColor="changeBottomBarColor"
 				v-show="currentPage==1" ref="recommend" />
 			<userPage v-show="currentPage==2" ref="user" />
 		</view>
-		<view v-if="!isShowBlackBar" class="tabs-bar" style="height: 65px;">
-			<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
-				@click="tabChange(0)">
-				<view style="margin: 16rpx 0 11rpx;">
+		<view v-if="!isShowBlackBar" class="tabs-bar" :style="{'height': tabHeight + 'px'}">
+			<view :class="currentPage==0?'tab active': 'tab'" @click="tabChange(0)">
+				<view style="margin-top: 15rpx;">
 					<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
 						mode="heightFix">
 					</image>
@@ -17,18 +16,16 @@
 				</view>
 				剧场
 			</view>
-			<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
-				@click="tabChange(1)">
-				<view style="margin: 16rpx 0 11rpx;">
+			<view :class="currentPage == 1?'tab active': 'tab'" @click="tabChange(1)">
+				<view style="margin-top: 15rpx;">
 					<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
 						mode="heightFix"></image>
 					<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
 				</view>
 				推荐
 			</view>
-			<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
-				@click="tabChange(2)">
-				<view style="margin: 16rpx 0 11rpx;">
+			<view :class="currentPage == 2?'tab active': 'tab'" @click="tabChange(2)">
+				<view style="margin-top: 15rpx;">
 					<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
 					</image>
 					<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
@@ -37,10 +34,9 @@
 			</view>
 		</view>
 
-		<view v-if="isShowBlackBar" class="tabs-bar2" style="height: 65px;">
-			<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
-				@click="tabChange(0)">
-				<view style="margin: 16rpx 0 11rpx;">
+		<view v-if="isShowBlackBar" class="tabs-bar2" :style="{'height': tabHeight + 'px'}">
+			<view :class="currentPage==0?'tab active': 'tab'" @click="tabChange(0)">
+				<view style="margin-top: 15rpx;">
 					<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
 						mode="heightFix">
 					</image>
@@ -48,18 +44,16 @@
 				</view>
 				剧场
 			</view>
-			<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
-				@click="tabChange(1)">
-				<view style="margin: 16rpx 0 11rpx;">
+			<view :class="currentPage == 1?'tab active': 'tab'" @click="tabChange(1)">
+				<view style="margin-top: 15rpx;">
 					<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
 						mode="heightFix"></image>
 					<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
 				</view>
 				推荐
 			</view>
-			<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
-				@click="tabChange(2)">
-				<view style="margin: 16rpx 0 11rpx;">
+			<view :class="currentPage == 2?'tab active': 'tab'" @click="tabChange(2)">
+				<view style="margin-top: 15rpx;">
 					<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
 					</image>
 					<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
@@ -68,7 +62,7 @@
 			</view>
 		</view>
 
-		<view v-if="showEditBar" class="editBar" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
+		<view v-if="showEditBar" class="editBar">
 			<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
 				{{!isFullChoice?'全选':'全不选'}}
 			</view>
@@ -112,6 +106,7 @@
 				isFullChoice: false,
 				isShowBlackBar: false,
 				clientHeight: app.globalData.clientHeight,
+				tabHeight: app.globalData.tabHeight,
 			}
 		},
 		onLoad(options) {