【前端】Vue项目：旅游App-（2）TabBar：搭建TabBar、循环获取动态数据、相关工具封装

news2024/11/15 21:48:05

文章目录

    • 目标
    • 代码与过程
      • 静态html
      • css
      • 改成动态数据
    • 效果
    • 总代码
      • 修改或新建的文件
      • tabbarData.js
      • tab-bar.vue
      • load_assets
      • App.vue

目标

在这里插入图片描述
有两种实现方式：

  1. 把数据写死（静态、直接写在html中）
  2. 动态数据：封装、vite获取动态数据方法

代码与过程

静态html

把数据写死在html中：

<template>
    <div class="tab-bar">
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_home.png" alt="">
            <div class="text">首页</div>
        </div>
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_favor.png" alt="">
            <div class="text">收藏</div>
        </div>
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_order.png" alt="">
            <div class="text">订单</div>
        </div>
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_message.png" alt="">
            <div class="text">消息</div>
        </div>
    </div>
</template>

注意，由于tab-bar功能独立，我们把它写在单独的一个组件中。所以在App.vue中把router-link注释掉，把tabBar引入。

<template>
    <div class="app">
        <router-view/>
        <tab-bar></tab-bar>
        <!-- <router-link to="/home">首页</router-link>
        <router-link to="/favor">收藏</router-link>
        <router-link to="/order">订单</router-link>
        <router-link to="/message">消息</router-link> -->
    </div>
</template>

效果：

在这里插入图片描述

css

写css要用到less：开发环境有，生产环境无。

npm install less -D

代码：

.tab-bar {
    // fixed 绝对位置 位于浏览器窗口的位置
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;

    // flex布局,
    display: flex;

    // 浅浅的上边缘
    border-top: 1px solid #f3f3f3;

    .tab-bar-item {
        // 每一个item各占1个位置:平分所有位置
        flex: 1;

        // 对于每个item里面的img和text
        // 要求上下排列,要求他们居中,所以flex
        display: flex;
        flex-direction: column;
        
        // x轴方向上居中
        justify-content: center;

        // 若无align-items,每个item会把flex格子占满
        // align-items会让元素在Y轴对齐
        align-items: center;

        img {
            height: 36px;
        }

        .text {
            font-size: 12px;
        }
    }

}

效果：

在这里插入图片描述

改成动态数据

我们在html中的数据是这样的：显然有许多重复代码。

<div class="tab-bar">
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_home.png" alt="">
            <div class="text">首页</div>
        </div>
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_favor.png" alt="">
            <div class="text">收藏</div>
        </div>
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_order.png" alt="">
            <div class="text">订单</div>
        </div>
        <div class="tab-bar-item">
            <img src="@/assets/img/tabbar/tab_message.png" alt="">
            <div class="text">消息</div>
        </div>
    </div>

我们可以把数据抽取出来，用循环来动态地显示数据。这是封装的思想。

tabbarData.js：我们把它放在assets/data中。

const tabbarData=[
    {
        image:'tab_home.png',
        imageActive:'tab_home_active.png',
        text:'首页',
        path:'/home'
    },
    {
        image:'tab_favor.png',
        imageActive:'tab_favor_active.png',
        text:'收藏',
        path:'/favor'
    },
    {
        image:'tab_order.png',
        imageActive:'tab_order_active.png',
        text:'订单',
        path:'/order'
    },
    {
        image:'tab_message.png',
        imageActive:'tab_message_active.png',
        text:'消息',
        path:'/message'
    }
]

export default tabbarData

接下来在tab-bar中引入tabbarData，用v-for对数据进行循环遍历。
注意，vite中获得动态路径的方法应如下：

const getAssetsUrl=(image)=>{
    // 参数:相对路径,当前文件路径URL
    return new URL(`../../assets/img/tabbar/${image}`,import.meta.url).href
}

因此，tab-bar.vue如下：

<template>
    <div class="tab-bar">
        <template v-for="(item,index) in tabbarData">
            <div class="tab-bar-item">
                <img :src="getAssetsUrl(item.image)" alt="">
                <div class="text">{{item.text}}</div>
            </div>
        </template>
    </div>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbarData'

const getAssetsUrl=(image)=>{
    // 参数:相对路径,当前文件路径URL
    return new URL(`../../assets/img/tabbar/${image}`,import.meta.url).href
}

</script>

<style lang="less" scoped>
.tab-bar {
    // fixed 绝对位置 位于浏览器窗口的位置
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;

    // flex布局,
    display: flex;

    // 浅浅的上边缘
    border-top: 1px solid #f3f3f3;

    .tab-bar-item {
        // 每一个item各占1个位置:平分所有位置
        flex: 1;

        // 对于每个item里面的img和text
        // 要求上下排列,要求他们居中,所以flex
        display: flex;
        flex-direction: column;

        // x轴方向上居中
        justify-content: center;

        // 若无align-items,每个item会把flex格子占满
        // align-items会让元素在Y轴对齐
        align-items: center;

        img {
            height: 36px;
        }

        .text {
            font-size: 12px;
        }
    }

}
</style>

显然，整个项目中会获取动态数据的地方不止这里。
我们可以把getAssetsUrl作为工具封装到utils

注意，将getAssetsUrl放进utils后相对路径要改。

效果

在这里插入图片描述

总代码

修改或新建的文件

在这里插入图片描述

tabbarData.js

封装了tabbar的数据。

const tabbarData=[
    {
        image:'tab_home.png',
        imageActive:'tab_home_active.png',
        text:'首页',
        path:'/home'
    },
    {
        image:'tab_favor.png',
        imageActive:'tab_favor_active.png',
        text:'收藏',
        path:'/favor'
    },
    {
        image:'tab_order.png',
        imageActive:'tab_order_active.png',
        text:'订单',
        path:'/order'
    },
    {
        image:'tab_message.png',
        imageActive:'tab_message_active.png',
        text:'消息',
        path:'/message'
    }
]

export default tabbarData

tab-bar.vue

tab-bar组件：

<template>
    <div class="tab-bar">
        <template v-for="(item, index) in tabbarData">
            <div class="tab-bar-item">
                <img :src="getAssetsUrl(item.image)" alt="">
                <div class="text">{{ item.text }}</div>
            </div>
        </template>
    </div>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbarData'
import { getAssetsUrl } from '@/utils/load_assets'
</script>

<style lang="less" scoped>
.tab-bar {
    // fixed 绝对位置 位于浏览器窗口的位置
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;

    // flex布局,
    display: flex;

    // 浅浅的上边缘
    border-top: 1px solid #f3f3f3;

    .tab-bar-item {
        // 每一个item各占1个位置:平分所有位置
        flex: 1;

        // 对于每个item里面的img和text
        // 要求上下排列,要求他们居中,所以flex
        display: flex;
        flex-direction: column;

        // x轴方向上居中
        justify-content: center;

        // 若无align-items,每个item会把flex格子占满
        // align-items会让元素在Y轴对齐
        align-items: center;

        img {
            height: 36px;
        }

        .text {
            font-size: 12px;
        }
    }

}
</style>

load_assets

存放封装的读取assets文件的工具。本篇的工具getAssetsUrl用来获取动态数据（vite获取动态数据的方法）

// vite中要这样获取动态数据
export const getAssetsUrl=(image)=>{
    // 参数:相对路径,当前文件路径URL
    return new URL(`../assets/img/tabbar/${image}`,import.meta.url).href
}

App.vue

略有修改。

<template>
    <div class="app">
        <router-view/>
        <tab-bar></tab-bar>
    </div>
</template>

<script setup>
import tabBar from './components/tab-bar/tab-bar.vue';
</script>

<style lang="less" scoped>

</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python详解（6）——键盘鼠标操控术（娱乐篇）

python详解（6）——键盘鼠标操控术（娱乐篇）

目录 本文为原创作品&#xff0c;抄袭必究&#xff01; &#x1f3c6;一、前言 &#x1f3c6;二、pyautogui模块 &#x1f3c6;三、鼠标相关操作 &#x1f6a9;1、鼠标移动 &#x1f6a9;2、获取鼠标位置 &#x1f6a9;3、鼠标点击 &#x1f6a9;4、按松鼠标 &#x1f6a9;5、拖…
阅读更多...
笔耕不辍，学习习惯？兴趣爱好？源于对真知的热爱？

笔耕不辍，学习习惯？兴趣爱好？源于对真知的热爱？

干程序员工作、上班赚钱、读书写作、股票投资&#xff0c;加班加点、充满激情&#xff0c;吸金赚钱、养家糊口、为自由和梦想而奋斗&#xff0c;这是比较基础的。 但如果想着奋斗的过程中&#xff0c;充满干劲地做一件事&#xff0c;坚持下去&#xff0c;投入沉迷其中&#xf…
阅读更多...
Docker入门介绍

Docker入门介绍

一、Docker介绍 1、Docker是什么&#xff1f; Docker &#xff0c;翻译过来就是码头工人. 虚拟化容器技术。Docker基于镜像&#xff0c;可以秒级启动各种容器。每一种容器都是一个完整的运行 环境&#xff0c;容器之间互相隔离。 Docker是一个开源的应用容器引擎&#xff0…
阅读更多...
Ubuntu Linux基本操作+安装工具+安装ROS+g++编译+Cmake

Ubuntu Linux基本操作+安装工具+安装ROS+g++编译+Cmake

Ubuntu Linux基本操作安装工具安装ROSg编译Cmake 1、进入到根目录 cd /2、回到当前工作空间 cd ~3、查看目录中的内容 lsll4、创建文件夹 mkdir 1235、删除文件夹 rm -rf 123/这里我们在输入要删除的文件夹名时&#xff0c;可以通过按tab键快速补全对应的文件夹名。 按两…
阅读更多...
【寒假每日一题】洛谷 P1838 三子棋I

【寒假每日一题】洛谷 P1838 三子棋I

题目链接&#xff1a;P1838 三子棋I - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述 小a和uim喜欢互相切磋三子棋。三子棋大家都玩过是吗&#xff1f;就是在九宫格里面OOXX&#xff08;别想歪了&#xff09;&#xff0c;谁连成3个就赢了。 由于小a比较愚蠢&#xf…
阅读更多...
Nodejs---Express的中间件的分类和自定义中间件的方式

Nodejs---Express的中间件的分类和自定义中间件的方式

自定义中间件
阅读更多...
《信号与系统实验》实验 3：信号时域抽样和恢复

《信号与系统实验》实验 3：信号时域抽样和恢复

文章目录 实验内容实验1：抽样定理验证实验f(t)间隔0.5s间隔1s间隔2s验证抽样定理实验2：信号恢复实验间隔0.5s间隔1s间隔2s抽样间隔对于信号恢复过程的影响DAC一阶保持器总结实验内容 实验1：抽样定
阅读更多...
HTTPS协议的原理 --- RSA密钥协商算法

HTTPS协议的原理 --- RSA密钥协商算法

目录 一、TLS握手过程 二、RSA密钥协商握手过程 TLS第一次握手 TLS第二次握手 TLS第三次握手 TLS第四次握手 数字证书和CA机构 数字证书签发和验证流程 三、RSA 算法的缺陷 DH 密钥协商算法 一、TLS握手过程 上图简要概述来 TLS 的握手过程&#xff0c;其中每一个「框…
阅读更多...
Morris遍历

Morris遍历

1、引入 二叉树的遍历 递归实现的方式&#xff1a; public static class Node {public int value;Node left;Node right;public Node(int data) {this.value data;} }//每个节点都是被有限次访问&#xff0c;时间复杂度O(N)&#xff0c;因为每次递归都要存储返回信息&#…
阅读更多...
hadoop 集群搭建（详细版）

hadoop 集群搭建（详细版）

hadoop 集群搭建更改主机名映射设置免密同步时间创建工作目录下载jdk安装配置Hadoop修改配置文件向其他节点分发配置完成的程序为Hadoop添加环境变量启动集群初始化启动集群web页面web页面:[hdfsweb页面](http://192.168.88.128:9870/)web页面:[yarnweb页面](http://192.168.88…
阅读更多...
3.0、Linux-常用目录、文件基本命令

3.0、Linux-常用目录、文件基本命令

3.0、Linux-常用目录、文件基本命令 命令&#xff1a;ls&#xff08;列出目录&#xff09; ls 命令在 Linux 中是常常被使用到的&#xff0c;因为 Linux 不像 Windows有可视化的界面&#xff1b; -a 参数&#xff1a;all &#xff0c;查看全部的文件&#xff0c;包括隐藏文件&…
阅读更多...
【免杀前置课——Windows编程】二十三、内存管理—堆内存管理、虚拟内存管理、文件映射、共享内存、不依靠临界区限制文件多开、DLL注入

【免杀前置课——Windows编程】二十三、内存管理—堆内存管理、虚拟内存管理、文件映射、共享内存、不依靠临界区限制文件多开、DLL注入

内存管理—堆文件映射***文件映射的概念:***共享内存文件多开限制新思路DLL注入远程线程注入远程线程注入.exetest.dll文件映射 文件映射的概念: 文件映射(Mapping&#xff09;是一种将文件内容映射到进程虚拟内存的技术。 映射成功的文件可以用视图,来引用这段内存,从而达到…
阅读更多...
中科易安联网智能门锁2022年度总结

中科易安联网智能门锁2022年度总结

时光如梭&#xff0c;步履不辍。在这繁忙而又充实的一年&#xff0c;中科易安从提升服务、优化产品、扩展市场的维度发力&#xff0c;通过扎实的努力、不懈的勤勉&#xff0c;圆满地完成了2022年的工作。接下来&#xff0c;中科易安将为媒体、友商、用户朋友们呈现中科易安2022…
阅读更多...
通过Lambda表达式 简单体验一下java方法引用

通过Lambda表达式 简单体验一下java方法引用

观看本文前 您需要先掌握 Lambda表达式 如果您之前没有接触过 可以先查看我的文章 java Lambda概念 通过实现线程简单体验一下Lambda表达式 java Lambda表达式的标准格式及其前提带有(代码演示) 然后 我们用 Lambda表达式 写在里面的其实就是一种解决方案 拿参数做操作 那么 …
阅读更多...
Qss文件设置Qt界面风格

Qss文件设置Qt界面风格

需要协商才能修改软件界面的风格&#xff0c;所以要留出通用的接口&#xff0c;于是选择使用QSS文件设置软件风格。 一、创建Qss文件 直接创建以.qss为后缀的文件 二、Qt使用Qss文件有两种办法 1、第一种办法&#xff0c;添加资源文件.qrc&#xff0c;然后在qrc文件中添加qss文…
阅读更多...
【云边有个小卖部】

【云边有个小卖部】

童年就像童话&#xff0c;这是他们在童话里第一次相遇。 那么热的夏天&#xff0c;少年的后背被女孩的悲伤烫出一个洞&#xff0c;一直贯穿到心脏。 刘十三被欺负得最惨&#xff0c;却想保护凶巴巴的程霜。 每当她笑的时候&#xff0c;就让他想起夏天灌木丛里的萤火虫&#xff…
阅读更多...
Tic-Tac-Toe有多少种不同棋局和盘面状态（python实现）

Tic-Tac-Toe有多少种不同棋局和盘面状态（python实现）

目录 1. 前言 2. 如何去重&#xff1f; 3. 代码实现 3.1 对称等价判断 3.2 find_neighbor()改造 3.3 主程序及运行结果 4. 延申思考 1. 前言 在前两篇博客中实现了遍历搜索所有的Tic-Tac-Toe的棋局的python程序实现。 Tic-Tac-Toe可能棋局搜索的实现&#xff08;python…
阅读更多...
【Java寒假打卡】Java基础-多态

【Java寒假打卡】Java基础-多态

【Java寒假打卡】Java基础-多态概述多态中成员访问的特点多态的好处和弊端多态中转型多态中转型存在的风险概述 同一个对象在不同时刻表现出来的不同形态 多态的前提和体现 有继承/实现关系有方法重写。子类对父类进行方法重写有父类引用指向子类对象 package com.hfut.edu.…
阅读更多...
【阶段二】Python数据分析NumPy工具使用02篇：数组的基本属性与数组的数据获取

【阶段二】Python数据分析NumPy工具使用02篇：数组的基本属性与数组的数据获取

本篇的思维导图： 数组的基本属性 NumPy数组的基本属性主要包括数组的形状、大小、类型和维数。 描述 代码 结果
阅读更多...
Zookeeper详解（一）——基础介绍

Zookeeper详解（一）——基础介绍

概念 zookeeper官网&#xff1a;https://zookeeper.apache.org/ 大数据生态系统里的很多组件的命名都是某种动物或者昆虫&#xff0c;比如hadoop就是 &#x1f418;&#xff0c;hive就是&#x1f41d;。zookeeper即动物园管理者&#xff0c;顾名思义就是管理大数据生态系统各…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023