壁纸小程序Vue3(自定义头部组件)

最新推荐文章于 2024-07-08 18:03:40 发布

君泺

最新推荐文章于 2024-07-08 18:03:40 发布

阅读量1k

点赞数 10

分类专栏：壁纸小程序Vue3 文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/jklzbc/article/details/137228397

版权

壁纸小程序Vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用自定义头部组件，包括处理H5中的状态栏高度、胶囊按钮位置以及动态设置标题。作者还展示了封装通用的高度获取函数以及在模板中调用这些函数的方法。

摘要由CSDN通过智能技术生成

1.自定义头部

coustom-nav

<view class="layout">
    <view class="navbar">
        <view class="statusBar"></view>
        <view class="titleBar">
          <view class="title">标题</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)状态栏

<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>

填充区域，让轮播图展示全

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

//状态栏
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中会报错，所以创建一个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.动态定义标题

<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.点击公告进行跳转

notice.vue

<template>
  <view class="noticeLayout">
      <view class="title">
          <view class="tag">
            <uni-tag text="置顶" type="error" inverted></uni-tag>
          </view>
          <view class="font">这个区域填写标题</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">
        内容区域
      </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>