适配微信小程序

xuyonghao

2025-02-11 90c6eb32f9c3abdf2d1c91dc7c255a55c95b8ca7

 pages/index/index.vue

@@ -1,9 +1,13 @@
<template>
<view>
   <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
      <uni-icons class= "user-button" type="contact" size="26" color="#fff" @click="toMine"></uni-icons>
      <view class="nav">
          <text class="nav-title">北京市育英中学</text>
      </view>
   </view>
   <view class="content">
      <view class="header_bg">
         <uniNavBar title="北京市育英中学" class="header-bar" background-color="transparent" right-icon="contact" color="#fff"
          @clickRight="toMine">
         </uniNavBar>
         <div class="header-info">
            <div class="left">
               <div class="weather-info">
@@ -56,6 +60,7 @@
         </div>
      </view> -->
   </view>
</view>
</template>

<script>
@@ -78,6 +83,8 @@
            update: false,
            version:'',
            timerId:'',
            navHeight: '',
            statusBarHeight: '',
         }
      },
      computed: {
@@ -128,7 +135,13 @@
         
      },
      onLoad() {
			
               let {
                 statusBarHeight,
                 system
               } = uni.getSystemInfoSync()
               this.statusBarHeight = statusBarHeight
               this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
               console.log(this.navHeight, "导航栏高度");
      },
      onPullDownRefresh(){
         console.log("refresh");
@@ -181,6 +194,37 @@
</script>

<style lang="scss">
   .topNav {
       height: 100rpx;
       background-color: #2894FF;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding: 0 20rpx;
       box-sizing: border-box;
      position: relative;
     }
   .nav {
       font-size: 36rpx;
       font-weight: 600;
       color: #fff;
      margin-right: 30rpx;
      position: absolute;
      left: 50%;
       transform: translateX(-50%);
   }
   .nav-search input {
       width: 60%;
      height: 62rpx;
      border-radius: 30rpx;
      padding-left: 25rpx;
       background-color: #f0f8ffa6;
       box-sizing: border-box;
   }
   .placClass {
      font-size: 24rpx;
      color: #fff;
   }
   .content {
      display: flex;
      flex-direction: column;
@@ -191,9 +235,10 @@
      .header_bg {
         width: 100%;
         height: 500rpx;
         background: url(../../static/index/u3.jpg) no-repeat;
         background-size: 100% 100%;
         background-position: left top;	
         background-image: url('../../static/index/u3.jpg');
         background-size: cover;
         background-position: center; 
			
         .header-bar {
            /deep/.uni-navbar--border {
               border-bottom: none;
@@ -380,4 +425,8 @@
      display: flex;
      justify-content: center;
   }
	
   .user-button {
      margin-right: auto;
   }
</style>