1.自定義頭部

?coustom-nav

<view class="layout">
    <view class="navbar">
        <view class="statusBar"></view>
        <view class="titleBar">
          <view class="title">標(biāo)題</view>
            <view class="search">
                <uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
                <text class="text">搜索</text>
            </view>
        </view>
    </view> 

.layout{
  .navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background:
    // linear-gradient(to bottom,rgba(0,0,0,0) 50%,#fff 100%),
    linear-gradient(to bottom,rgba(0,0,0,0) , #fff  400rpx),
    linear-gradient(to right,#beecd8 20%,#F4E2D8);
    .statusBar {}
    .titleBar{
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      // height: 100rpx;
      .title{
        font-size: 22px;
        font-weight: 700;
        color: $text-font-color-1;
      }
      .search{
         width: 220rpx;
         height: 50rpx;
         border-radius: 60rpx;
         background: rgba(255, 255, 255, 0.4);
         border: 1px solid #fff;
         margin-left: 30rpx;
         color: #999;
         font-size: 28rpx;
         display: flex;
         align-items: center;
         .text{
           padding-left: 10rpx;
         }
         .icon{
           margin-left: 5rpx;
         }
         
       }
     	  
    }
  }

?1)狀態(tài)欄

?

? <view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>

H5中為0

?

? <view class="titleBar" :style="{height:titleBarHeight+'px'}">

獲取膠囊位置

??<view class="fill" :style="{height:statusBarHeight+titleBarHeight+'px'}">
? ? </view>

填充區(qū)域，讓輪播圖展示全

<script setup>
import { ref } from 'vue'

//狀態(tài)欄
let SYSTEM_INFO = uni.getSystemInfoSync();
let statusBarHeight = ref(SYSTEM_INFO.statusBarHeight)
// 獲取膠囊按鈕信息
let {top,height} = uni.getMenuButtonBoundingClientRect();
let titleBarHeight = ref(height + (top - statusBarHeight.value)*2)
</script>
?

2.封裝組件

上面的做法在H5中會報(bào)錯(cuò)，所以創(chuàng)建一個(gè)utils.js

const SYSTEM_INFO = uni.getSystemInfoSync();
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 0;

export const getTitleBarHeight = ()=>{
? if(uni.getMenuButtonBoundingClientRect){
? ? ? let {top,height} = uni.getMenuButtonBoundingClientRect();
? ? ? return ?height + (top - getStatusBarHeight())*2
? }else{
? ? return 40;
? }
}

export const getNavBarHeight = ()=> getStatusBarHeight() + getTitleBarHeight();

<script setup>
import { ref } from 'vue'
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from '@/utils/system.js'
</script>
?

3.動態(tài)定義標(biāo)題

<script setup>
import { ref } from 'vue'
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from '@/utils/system.js'
defineProps({
? title:{
? ? type:String,
? ? default:"壁紙"
? }
})
</script>

<custom-nav-bar title="分類"></custom-nav-bar>

?preview.vue

<view class="goBack" :style="{top:getStatusBarHeight()+'px'}" @click="goBack">

//返回上一頁
const goBack = ()=>{
? uni.navigateBack()

}

4.點(diǎn)擊公告進(jìn)行跳轉(zhuǎn)

notice.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-847487.html

<template>
  <view class="noticeLayout">
      <view class="title">
          <view class="tag">
            <uni-tag text="置頂" type="error" inverted></uni-tag>
          </view>
          <view class="font">這個(gè)區(qū)域填寫標(biāo)題</view>
      </view>
      <view class="info">
        <view class="item">君濼</view>
        <view class="item">
          <uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
        </view>
      
      </view>
      
      <view class="content">
        內(nèi)容區(qū)域
      </view>
      
      <view class="count">
        閱讀 5588
      </view>
      
    </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss">
.noticeLayout{
	padding:30rpx;
		.title{
			font-size: 40rpx;
			color:#111;
			line-height: 1.6em;
			padding-bottom:30rpx;
			display: flex;
			.tag{
				transform: scale(0.8);
				transform-origin: left center;
				flex-shrink: 0;	
			}
			.font{
				padding-left:6rpx;
			}
		}
		.info{
			display: flex;
			align-items: center;
			color:#999;
			font-size: 28rpx;
			.item{
				padding-right: 20rpx;
			}
		}
		.content{
			padding:50rpx 0;
		}
		.count{
			color:#999;
			font-size: 28rpx;
		}
}
</style>

到了這里，關(guān)于壁紙小程序Vue3(自定義頭部組件)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！