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

分为没有跳转页面的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标题 其实还有一个就是 返回上一页 类似我们小程序自己路由上的返回 

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

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

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

相关文章

c++的学习之路:8、内存管理与模板

一、 C/C内存分布 首先在c语言的动态内存管理中我知道了代码是如何存储数据的&#xff0c;然后c是根据c语言底层变化来的&#xff0c;那么c语言的内存管理就是适用c的内存管理&#xff0c;在c语言中程序是分为几个部分存储&#xff0c;例如在栈堆等等&#xff0c;他们的分布如…

谷粒商城实战(008 缓存)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第151p-第p157的内容 简介 数据库承担落盘&#xff08;持久化&#xff09;工作 拿map做缓存 这种是本地缓存&#xff0c;会有一些问题 分布…

在idea中使用sql语言提醒

1.Settings中设置 2. 配置好数据库名字 3. altenter 注入方言 注入后是下面这样

2023.4.7 机器学习周报

目录 引言 Abstract 文献阅读 1、题目 2、引言 3、过去方案和Motivation 4、Segment Anything模型 5、创新点 6、实验过程 7、实验结果 1、评价绩效 2、检测评价 3、跟踪评价 8、 结论 总结 引言 本周阅读了一篇关于高效的任意分割模型的文献&#xff0c;用于自…

QT背景介绍

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、QT背景 1.1什么是QT 1.2QT的发展历史 1.3什么是框架、库 1.4QT支持的平台 1.5QT的优点 1.6QT的…

【随笔】Git 基础篇 -- 分支与合并(九)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

【Frida】【Android】09_爬虫之Socket

&#x1f6eb; 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…

如何开发创建自己的npm包并成功发布、维护至npm官方网站

npm&#xff0c;全称为Node Package Manager&#xff0c;是专为JavaScript生态系统设计的软件包管理系统&#xff0c;尤其与Node.js平台紧密关联。作为Node.js的默认包管理工具&#xff0c;npm为开发者提供了便捷的方式来安装、共享、分发和管理代码模块。 npm作为JavaScript世…

xilinx fpga程序固化

一、前言 xilinx 旗下的产品主要有包含有处理器的SOC系列&#xff0c;也有只有纯逻辑的fpga&#xff0c;两者的程序固化的方法并不相同&#xff0c;本文介绍只包含纯逻辑而不涉及处理器的fpga的代码固化。 二、固化流程 将工程综合&#xff0c;实现&#xff0c;并得到比特流…

顶顶通呼叫中心中间件-话术编辑器机器人转人工坐席配置(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-话术编辑器机器人转人工座席配置(mod_cti基于FreeSWITCH) 配置方法 一、ACD排队转接 二、伴随转接 比如你设置的通知规则是任意满足一个就通知那么通话时间设置为10 秒那样他只要通话时间到10秒他就会转坐席。 如果要转人工的时侯转手机可以这样配置 把…

Android 360度全景图功能

方法一&#xff1a;OpenGL ES 1.在build.gradle文件中添加依赖 allprojects {repositories {maven { url https://jitpack.io }} } 高版本AS中settings.gradle.kts&#xff1a; dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_RE…

基于DCT和扩频的音频水印嵌入提取算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ......................................................................... N 10; %嵌入一…

c51 单片机如何控制小灯闪烁?

目录 硬件电路设计 软件编程 烧录程序 测试 调整和优化 C51单片机是一种经典的8位微控制器&#xff0c;广泛应用于各种嵌入式系统和智能控制项目中。 C51单片机控制小灯闪烁主要涉及到硬件电路设计和软件编程两个方面。下面是一个基本的步骤说明&#xff1a; 硬件电路设计…

Vue2(完结):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash

一、router-link的replace属性 1、作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 2、浏览器的历史记录有两种写入方式&#xff1a;分别为push和replace&#xff0c;push是追加历史记录&#xff0c;replace是替换当前记录。路由跳转时候默认为push 3、如何开启repla…

HarmonyOS 应用开发之分布式数据对象跨设备数据同步

场景介绍 传统方式下&#xff0c;设备之间的数据同步&#xff0c;需要开发者完成消息处理逻辑&#xff0c;包括&#xff1a;建立通信链接、消息收发处理、错误重试、数据冲突解决等操作&#xff0c;工作量非常大。而且设备越多&#xff0c;调试复杂度也将同步增加。 其实设备…

深入理解 Vue3 中使用 v-model技术实现双向数据绑定

引言 在 Vue3 中&#xff0c;v-model 是一个非常有用的指令&#xff0c;它提供了一种简洁的方式来实现组件之间的双向数据绑定。本文将深入探讨 Vue3 中的 v-model 技术&#xff0c;包括它的工作原理、使用场景以及如何在自定义组件中应用 v-model。 一、v-model 的工作原理 在…

OpenHarmony实战:轻量带屏解决方案之恒玄芯片移植案例

本文章基于恒玄科技 BES2600W 芯片的欧智通 Multi-modal V200Z-R 开发板&#xff0c;进行轻量带屏开发板的标准移植&#xff0c;开发了智能开关面板样例&#xff0c;同时实现了 ace_engine_lite、arkui_ui_lite、aafwk_lite、appexecfwk_lite、HDF 等部件基于 OpenHarmony Lite…

探索Flutter框架对iOS应用打包与部署的最佳实践

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…

HTML——5.表单、框架、颜色

一、表单 HTML 表单用于在网页中收集用户输入的数据&#xff0c;例如登录信息、搜索查询等。HTML 提供了一系列的表单元素&#xff0c;允许用户输入文本、选择选项、提交数据等。 <!DOCTYPE html> <html lang"en"> <head> <meta charset&q…

视频汇聚/安防监控/视频存储EasyCVR平台EasyPlayer播放器更新:新增【性能面板】

视频汇聚/安防监控/视频存储平台EasyCVR基于云边端架构&#xff0c;可以在复杂的网络环境中快速、灵活部署&#xff0c;平台视频能力丰富&#xff0c;可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云…