广告动态垂直居中

pages/personal.vue

@@ -54,9 +54,12 @@
 			</view>
 		</view>
 		<view class="ps__btn" v-if="token" @click="loginOut">退出登录</view>
-        
+	</view>
+    <view v-if="carouselHeight == 0">
         <u-gap bgColor="transparent" v-if="carouselFlag" height="20"></u-gap>
-        <view v-if="carouselFlag" style="width: 700rpx;margin: 0 auto;position: relative;">
+    </view>
+    <view v-if="carouselFlag" :class="carouselHeight > 0 ? 'carouselView' : 'carouselView carouselView2'" :style="{height: carouselHeight > 0 ? carouselHeight + 'rpx'  : '120px'}">
+        <view style="position: relative; width: 100%;">
             <u-swiper radius="12rpx" :height="120" :list="list5" circular @change="e => current = e.current"
                 :autoplay="true" keyName="imageUrl" @click="goOtherLink">
             </u-swiper>
@@ -66,7 +69,6 @@
             </view>
         </view>
     </view>
-	<u-gap bgColor="transparent" height="70"></u-gap>
 </view>
 </template>
 
@@ -138,6 +140,7 @@
             list5: [],
             current: 0,
             carouselFlag:false,
+            carouselHeight : 0,
         }
     },
     methods: {
@@ -367,7 +370,10 @@
                 },
             });
         },
-
+        async getElInfo() {
+            let rectInfo = await this.$u.getRect('.personal');
+            console.log('rectInfo', rectInfo);
+        }
     },
     mounted() {
         setTimeout(() => {
@@ -378,6 +384,41 @@
 			this.getUserInfo()
 		}
         this.getRotationList()
+        
+        let that = this
+        uni.getSystemInfo({ 
+          success: (res) => {
+            // 注意这里获得的高度宽度都是px，需要转换rpx
+            // 可使用窗口高度，不包含导航栏
+            let windowHeight = res.windowHeight
+            // 可使用窗口宽度
+            let windowWidth = res.windowWidth
+           
+            let query = uni.createSelectorQuery().in(that); 
+            setTimeout(() => {
+                query.select(".personal").boundingClientRect(function(data) { //data - 各种参数
                    // 获取元素高度
+                    let personalHeight = data.height
+                    
+                    uni.createSelectorQuery().in(that.$parent.$refs.myTab).select(".weui-tabbar").boundingClientRect(function(data) { //data - 各种参数
+                       
+                        console.log('weui-tabbar', data)
+                        // 获取元素高度
+                        let tabbarHeight = data.height
+                        
+                        
+                        let remainder = windowHeight - personalHeight - tabbarHeight
+                        console.log('remainder', remainder);
+                        if(remainder > 130) {
+                            //可使用窗口高度，将px转换rpx
+                            that.carouselHeight = (remainder * (750/ windowWidth))
+                        }
+                    }).exec()
+                }).exec()
+                
+            }, 100);
+            
+          }
+        })
     },
     onReady: function () {
         uni.setNavigationBarTitle({
@@ -388,7 +429,21 @@
 </script>
 
 <style lang="scss" scoped>
+.carouselView {
+    width: 700rpx;
+    margin: 0 auto;
+    display: flex; justify-content: center; align-items: center;
+    height:120rpx;
+}
+
+.carouselView2 {
+    display: block;
+    margin-bottom: 30px;
+    // margin: 20rpx 30rpx auto auto;
+}
+    
 .personal {
+    
     .ps__bg {
         background: url('@/static/my/my-bg.png') no-repeat;
         background-size: cover;