Taro + vue3 小程序封装标题组件

news/2024/6/24 7:56:26/文章来源:https://blog.csdn.net/lele66688888/article/details/137271566

分为没有跳转页面的title组件和 有跳转页面的title组件

我们可以把这个封装成一个组件

直接上代码

<template><div class="fixed-title-container"><div class="box"><div class="icon" v-if="isShow" @click="handleBack"><IconFont name="rect-left" size="12"></IconFont></div><div class="text" :style="{ marginLeft: isShow ? '15px' : '0' }">{{ Title }}</div></div></div>
</template><script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
const props = defineProps({Title: String,isShow: {required: false,default: false,},
});
const { Title, isShow } = toRefs(props);
const handleBack=()=>{Taro.navigateBack({delta: 1,})
}
</script><style lang="scss">
.fixed-title-container {height: 120px;padding: 0 30px;line-height: 120px;background: linear-gradient(to right,#d8ecfe,#d2e8fe,#cce5fe,#cde5ff,#c6e2ff,#c2dfff,#c1dffe);left: 0;right: 0;top: 0;z-index: 9;position: fixed;.box {display: flex;// justify-content: space-between;align-items: center;.icon {height: 50px;line-height: 50px;text-align: center;width: 50px;border-radius: 50%;background-color:d8ecfe;border: 1px solid #ccc;}.text {font-size: 30px;color: #15181d;font-weight: 700;}}
}
</style>
 <FixedTitle Title="功夫熊猫4" :isShow="true"></FixedTitle> //组件使用

当然我这个是比较简单的一个组件

这个组件的目的除了title标题 其实还有一个就是 返回上一页 类似我们小程序自己路由上的返回 

逻辑很简单的 大家可以在我这个基础上继续修改更加适合自己逻辑和样式的组件

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

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

相关文章

Linux 内核优化简笔 - 高并发的系统

简介 Linux 服务器在高并发场景下&#xff0c;默认的内核参数无法利用现有硬件&#xff0c;造成软件崩溃、卡顿、性能瓶颈。 当然&#xff0c;修改参数只是让Linux更好软件的去利用已有的硬件资源&#xff0c;如果硬件资源不够也无法解决问题的。而且当硬件资源不足的时候&am…

互联网轻量级框架整合之JavaEE基础I

不得不解释得几个概念 JavaEE SUN公司提出来的企业版Java开发中间件&#xff0c;主要用于企业级互联网系统的框架搭建&#xff0c;同时因为Java语言优质的平台无关性、可移植性、健壮性、支持多线程和安全性等优势&#xff0c;其迅速成为构建企业互联网平台的主流技术&#x…

matlab中旋转矩阵函数

文章目录 matlab里的旋转矩阵、四元数、欧拉角四元数根据两向量计算向量之间的旋转矩阵和四元数欧拉角转旋转矩阵旋转矩阵转欧拉角旋转矩阵转四元数参考链接 matlab里的旋转矩阵、四元数、欧拉角 旋转矩阵dcmR四元数quatq[q0,q1,q2,q3]欧拉角angle[row,pitch,yaw] % 旋转矩阵…

囊括所有大模型:高质量中文预训练模型大模型多模态模型大语言模型集合

在自然语言处理领域中&#xff0c;预训练语言模型&#xff08;Pretrained Language Models&#xff09;已成为非常重要的基础技术&#xff0c;本仓库主要收集目前网上公开的一些高质量中文预训练模型、中文多模态模型、中文大语言模型等内容(感谢分享资源的大佬)&#xff0c;并…

WPF学习笔记-FlowDocument流文档基础知识和基本操作

文章目录 概述一、块元素和内联元素1.1 块元素&#xff08;Block类&#xff09;1.2 内联元素&#xff08;Inline类&#xff09;二、Paragraph元素2.1 基本属性设置2.2 将内联元素Inline添加到Inlines中2.3 设置中西文字体不一样 三、Table元素3.1 添加新的Table3.2 添加列3.3 添…

数据结构进阶篇 之 【堆的应用】(堆排序,TOP-K问题)详细讲解

所有人都关心我飞的高不高&#xff0c;只有我妈关心我翅膀硬不硬 一、堆的应用 1. 堆排序 1.1 建堆 1.2 利用堆删除思想来进行排序 2.TOP-K问题 二、完结撒❀ –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀-正文开始-❀–❀–❀–❀–❀–❀–❀–❀–…

每日面经分享(pytest测试案例,接口断言,多并发断言)

pytest对用户登录接口进行自动化脚本设计 a. 创建一个名为"test_login.py"的测试文件&#xff0c;编写以下测试脚本 import pytest import requests# 测试用例1&#xff1a;验证登录成功的情况 # 第一个测试用例验证登录成功的情况&#xff0c;发送有效的用户名和密…

网页的血液——javascript

JavaScript 基础知识概述 1. JavaScript 介绍 JavaScript 是一种高级的、解释型的编程语言&#xff0c;它是一种基于对象的、事件驱动的语言&#xff0c;它允许开发者创建动态的网页。JavaScript 是一种脚本语言&#xff0c;它可以嵌入到 HTML 中&#xff0c;或者作为外部文件…

聚焦新污染物,共谋治理策|中联环保圈

在环境污染防治的征途上&#xff0c;新污染物治理不仅是一场考验决心和毅力的攻坚战&#xff0c;更是对原有治理策略的广度和深度的全面拓展。这需要以更加坚定的决心&#xff0c;更加科学的策略&#xff0c;以及更加创新的思维来应对。 地方两会圆满闭幕之际&#xff0c;各地…

链表优化与拓展的细节:深度探索与精致打磨(续篇)

五、链表算法的优化与拓展 链表算法的优化与拓展是链表应用中不可或缺的一部分。通过对算法进行精细打磨和创新拓展&#xff0c;我们可以进一步提升链表处理数据的效率和灵活性。 排序算法的优化 链表常用于实现各种排序算法&#xff0c;如插入排序、归并排序等。然而&#…

视频推拉流EasyDSS点播平台云端录像播放异常的问题排查与解决

视频推拉流EasyDSS视频直播点播平台可提供一站式的视频转码、点播、直播、视频推拉流、播放H.265视频等服务&#xff0c;搭配RTMP高清摄像头使用&#xff0c;可将无人机设备的实时流推送到平台上&#xff0c;实现无人机视频推流直播、巡检等应用。 有用户反馈&#xff0c;项目现…

redis对象list

Redis List是一组连接起来的字符串集合。 写操作&#xff1a; LPUSH 语法:LPUSH key value [value …] 功能:从头部增加元素,返回值为List中元素的总数。 RPUSH 语法:RPUSH key value [value …] 功能:从尾部增加元素,返回值为List中元素的总数。 LPOP 语法:LPOP key 功能…

fastadmin学习07-无限级分类

create table fa_producttype (id int auto_increment comment 分类id,createtime bigint null comment 创建时间,updatetime bigint null comment 更新时间,deletetime bigint null comment 删除时间,name varchar(255) null comment 分类名称…

数论与线性代数——整除分块【数论分块】的【运用】【思考】【讲解】【证明(作者自己证的QWQ)】

文章目录 整除分块的思考与运用整除分块的时间复杂度证明 & 分块数量整除分块的公式 & 公式证明公式证明 代码code↓ 整除分块的思考与运用 整除分块是为了解决一个整数求和问题 题目的问题为&#xff1a; ∑ i 1 n ⌊ n i ⌋ \sum_{i1}^{n} \left \lfloor \frac{n}{…

用html实现在页面底部养鱼的效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>在网页底部养鱼</title><link rel"stylesheet" href"./style.css"> </head> <body> <div id"fi…

​ SpringBoot自动装配原理

SpringBoot自动装配原理 SpringBoot的启动类上有一个注解&#xff1a;SpringBootApplication 。该注解是三个注解的复合注解。 1.SpringBootConfiguration 注解 点进SpringBootConfiguration 注解&#xff0c;可以发现其核心注解为Configuration注解&#xff1a; Configuration…

Mysql 常用SQL语句

1、查看mysql中所有的数据库&#xff0c; show databases; 2、创建库 create database 库名;&#xff08;也可以用 create database if not exists 库名; 表示如果库不存在再创建&#xff09; 例&#xff1a;create database if not exists ecology; 3、删除库 …

Mysql数据库故障排查与优化

目录 前言 一、Mysql数据库的单实例故障 1.故障一——拒绝连接数据库 1.1故障内容 1.2问题分析 1.3解决方法 2.故障二——密码错误 2.1故障内容 2.2问题分析 2.3解决方法 3.故障三——数据库处理较慢 3.1故障内容 3.2问题分析 3.3解决方法 4.故障四——数据库表…

【leetcode】力扣简单题两数之和

题目 思路 代码实现 #include<iostream> #include<unordered_map>using namespace std;class Solution { public:vector<int> TwoNumber(const vector<int>& nums, int target){vector<int> number_vector;unordered_map<int, int> …

SpringCloud学习(1)-consul

consul下载安装及使用 1.consul简介 Consul是一种开源的、分布式的服务发现和配置管理工具&#xff0c;能够帮助开发人员构建和管理现代化的分布式系统。它提供了一套完整的功能&#xff0c;包括服务注册与发现、健康检查、KV存储、多数据中心支持等&#xff0c;可以帮助开发人…