壁纸小程序Vue3(自定义头部组件)-Toy模板网

这篇具有很好参考价值的文章主要介绍了壁纸小程序Vue3(自定义头部组件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.自定义头部

壁纸小程序Vue3(自定义头部组件),壁纸小程序Vue3,小程序,前端,javascript

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)状态栏

壁纸小程序Vue3(自定义头部组件),壁纸小程序Vue3,小程序,前端,javascript

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

H5中为0

壁纸小程序Vue3(自定义头部组件),壁纸小程序Vue3,小程序,前端,javascript

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

壁纸小程序Vue3(自定义头部组件),壁纸小程序Vue3,小程序,前端,javascript

notice.vue文章来源地址https://www.toymoban.com/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">这个区域填写标题</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>

到了这里，关于壁纸小程序Vue3(自定义头部组件)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！