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

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卷积神经网络(CNN)的数学原理解析

文章目录 前言 1、介绍 2、数字图像的数据结构 3、卷积 4、Valid 和 Same 卷积 5、步幅卷积 6、过渡到三维 7、卷积层 8、连接剪枝和参数共享 9、卷积反向传播 10、池化层 11、池化层反向传播 前言 本篇主要分享卷积神经网络&#xff08;CNN&#xff09;的数学原理解析&#xf…

深入了解 Vue 3 中的 Transition 过渡动画

在本文中&#xff0c;我们将深入探讨 Vue 3 中实现 Transition 过渡动画的技术细节。过渡动画可以为用户界面增添平滑和生动的效果&#xff0c;提升用户体验。 首先新建一个基于uni-app框架为transition.vue的测试文件&#xff0c;在其中编写如下JavaScript、HTML和CSS代码&…

问题2-前端json数组数据转换成csv文件

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>将 JSON 数据导出为 CSV 文件</title> …

局域网与城域网(练习题)

局域网与城域网 ⭐️⭐️⭐️⭐️ 红色标记为答案⭐️⭐️⭐️⭐️ ⭐️⭐️⭐️ 蓝色标记为要点解析⭐️⭐️⭐️ 1.以下关于VLAN标记的说法中&#xff0c;错误的是&#xff08;&#xff09;。 A.交换机根据目标地址和VLAN标记进行转发决策 B.进入目的网段时&#xff0c;交换机…

【Oracle篇】expdp/impdp高效完成全部生产用户的全库迁移(第四篇,总共四篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在扩展大数据方向的知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣️❣️…

VTK 简介

VTK 简介 VTK 简介什么是 VTK&#xff1f;VTK 能做什么&#xff1f;VTK 的基本组成VTK 的框架结构VTK 的数据结构VTK 的可视化流程参考 VTK 简介 什么是 VTK&#xff1f; VTK&#xff0c;全称是Visualization Toolkit&#xff0c;即可视化工具包。是一个开源、跨平台、可自由…

vue+element ui实现表单组件的封装

效果图&#xff1a; 主要是使用vue elmentUi 的from的基础上进行封装 使用改组件&#xff0c;是需要自定义从父组件传入一下字段表单字段 export const topicTypeMainTaskEdit: any new Map([// 主任务可编辑状态[feasibleInstructions, // 督办件[{value: documentNum…

云计算面临的威胁

目录 一、概述 二、威胁建模分析 2.1 威胁建模的概念 2.2 威胁建模起到的作用 2.3 威胁建模的流程 2.3.1 威胁建模流程图 2.3.2 威胁建模流程内容 2.3.2.1 绘制数据流图 2.3.2.2 威胁识别与分析 2.3.2.2.1 STRIDE威胁分析方法论 2.3.2.3 制定消减措施 2.3.2.3.1 消减…

景联文科技提供高质量医疗健康AI大模型数据

医疗行业是典型的知识和技术密集型行业&#xff0c;其发展水平直接关系到国民健康和生命质量。 医疗健康AI大模型&#xff0c;作为人工智能的一个分支&#xff0c;能够通过学习大量的数据来生成新的数据实例&#xff0c;在医药研发、医学影像、医疗文本分析等都有广泛的应用前景…

项目管理计划

《项目管理计划》 1.项目背景说明 2.项目目标和范围 3.项目组织架构 4.项目进度管理办法 5.项目沟通管理 6.项目风险管理 软件开发全套资料包获取进主页或文末个人名片直接获取。

Flutter Web 的未来,Wasm Native 即将到来

早在去年 Google I/O 发布 Flutter 3.10 的时候就提到过&#xff0c; Flutter Web 的未来会是 Wasm Native &#xff0c;当时 Flutter 团队就表示&#xff0c;Flutter Web 的定位不是设计为通用 Web 的框架&#xff0c;类似的 Web 框架现在有很多&#xff0c;而 Flutter 的定位…

containerd配置HTTP私仓

文章目录 1. &#x1f6e0;️ 基础环境配置2. &#x1f433; Docker安装3. &#x1f6a2; 部署Harbor&#xff0c;HTTP访问4. &#x1f4e6; 部署ContainerD5. &#x1f504; 修改docker配置文件&#xff0c;向harbor中推入镜像6. 配置containerd6.1. 拉取镜像验证6.2. 推送镜像…

网络原理 - HTTP / HTTPS(1)——http请求

目录 一、认识HTTP协议 理解 应用层协议 二、fiddler的安装以及介绍 1、fiddler的安装 2、fiddler的介绍 三、HTTP 报文格式 1、http的请求 2、http的响应 五、认识URL 六、关于URL encode 一、认识HTTP协议 HTTP 全称为&#xff1a;“超文本传输协议”&#xff0c;是…

好物分享:FPGA实现SDI视频编解码的方案设计汇总

目录 1、前言2、专用芯片方案2.1、GS2971FPGA的图像采集 设计方案2.2、GS2971FPGA的图像采集图像缩放 设计方案2.3、GS2971FPGA的图像采集纯verilog图像缩放纯verilog视频拼接 设计方案2.4、GS2971FPGA的图像采集HLS图像缩放Video Mixer视频拼接 设计方案2.5、GS2971FPGA的图像…

C++初阶:5.STL简介(了解)

STL简介&#xff08;了解&#xff09; 一.什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 二. STL的版本 原始版本 Alexander Stepan…

算法设计课第二周(分治 芯片测试)

实验2 芯片测试算法设计 一、【实验目的】 &#xff08;1&#xff09;理解分治策略的设计思想&#xff1b; &#xff08;2&#xff09;熟悉将伪码转换为可运行的程序的方法&#xff1b; &#xff08;3&#xff09;能够根据算法的要求设计具体的实例。 二、【实验内容】 有…

【教学类-09-06】20240401细线迷宫图01+箭头图片(A4横版一页-1份横版)

作品展示 作品展示 word模板 重点说明 代码展示 批量制作细线条的迷宫图(A4横板一面一份横版)图片加箭头图片 作者&#xff1a; 1、落难Coder https://blog.csdn.net/u014297502/article/details/124839912 2、AI对话大师、 3、阿夏 作者&#xff1a;2024年4月3日 numint(input…

构建第一个ArkTS应用(Stage模型)

创建ArkTS工程 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发&#xff08;本文以应用开发为例&#xff0c;Atomic Servi…

2024年04月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2024年04月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…

【面试八股总结】传输控制协议TCP(一)

一、什么是TCP协议 TCP是传输控制协议Transmission Control Protocol TCP 是面向连接的、可靠的、基于字节流的传输层通信协议。 面向连接的&#xff1a;每条TCP连接杜只能有两个端点&#xff0c;每一条TCP连接只能是点对点的&#xff08;一对一&#xff09;可靠的&#xff1a…