vue2.0小案例——实现移动端tabbar布局

VIP文章 已于 2022-09-01 20:38:41 修改
阅读量510 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js 前端
于 2022-09-01 20:38:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56607109/article/details/126650854
版权
  • 实现一个移动端tabbar：具体功能，点击footer的四个板块上面的大盒子会跳转到对应的版块，显示文字内容，同时下面的对应的盒子和图标变色。
  • vue里面的设计思想和DOM阶段大有不同，要摆脱固有思想，
  • 这个案例里面用到了v-for { {}} v-bind class属性绑定
  • 比较巧妙的是，在data里面设置一个mtindex属性，利用v-for里面的index就可以对应上点击下面盒子，对应上面盒子的切换。不用使用排他思想。
  • 实现后的界面和代码如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端tabbar</title>
    <link rel="stylesheet" href="./font/iconfont.woff">
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>

</head>
<style>
    * {
   
        padding: 0;
        margin: 0;
    }

    div {
最低0.47元/天 解锁文章
小狐狸ya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2.0 实现移动端图片上传功能
10-18
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。具体实例大家大家参考下本
uniapp+uview2.0+vuex实现自定义tabbar组件
最新发布
oneya1的博客
11-07 1751
/ // console.log('更新', newVal, oldVal)1.在components文件夹中新建MyTabbar组件。// immediate: true, //立即执行。4.创建store目录，下面创建index.js文件。// deep: true, // 深度监听。//这里用到了vuex存储数据。
uniapp+uView2.0实现自定义动态tabbar
weixin_43401380的博客
03-04 4647
uniapp+uView2.0实现自定义动态tabbar
微信小程序的自定义TabBar及Vant的使用
专注微信小程序
08-05 2067
1、定义element {:root {2、使用element {1、配置在app.json中的 tabBar 配置中加上, 表示要自定义，不再使用list为了兼容低版本，list虽然作废，但是也不能删"list": [....2、新建自定义文件在根目录下新建文件夹，在里面新建index文件3、引入vant依赖Vant Weapp - 轻量、可靠的小程序 UI 组件库4、基础tabBarvant中的基本tabBar代码。
uniapp自定义tabbar——中间特殊按钮
xiaoququ的博客
08-23 2721
【代码】uview2.0自定义tabbar。
vue移动端Tabbar 标签栏（简单）
qq_52126119的博客
11-13 2712
使用组件：Vant Vant 是一个轻量、可靠的移动端组件库
vue2.0实现一个直角梯形的tabbar组件
qq_43610311的博客
09-22 256
使用vue自定义一个直角梯形的tabbar
【Vue实用功能】Vue实现tab页多页面切换
weixin_44590591的博客
05-19 8084
Vue实现tab页多页面切换 实现路由发生变化时，新增一个tab标签页，点击其他标签时切换到对应的页面，刷新网页同时保留状态 这里就直接说它实现的代码就OK！！！ VueX记录下每次新增后的tab标签页路由 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 路由导航start // 缓存组件页面 ca
Vue 的TabBar点击 实现照片和页面切换
qq_40717644的博客
09-09 596
在用vue开发移动端项目时，组件tarbar图片切换的问题
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
zhumengzj的博客
02-09 7247
在 vue 中，实现 Tab 切换主要有三种方式：使用动态组件，使用 vue-router 路由，使用第三方插件。因为这次完成的功能只是简单切换组件，再则觉得使用路由切换需要改变地址略微麻烦，所以使用的是动态组件实现，如果是在大型应用上，可能使用 vue-router 会方便一些。先看下最终实现的效果，结构比较简单，顶部的三个 Tab 标签用于切换，内容区域分别为三个子组件。效果预览关键代码及分析...
vue的学习笔记（14）之Tabbar案例
肿肿的博客
02-03 791
Tabbar案例1、TabBar实现思路2、tabbar-实现流程 1、TabBar实现思路 （1）如果在下方有一个单独的TabBar组件，如何封装？ 自定义TabBar组件，在APP中使用 让TabBar出于底部，并且设置相关的样式 （2）TabBar中显示的内容由外界决定 定义插槽 flex布局平分TabBar （3） 自定义TabBarItem，可以传入 图片和文字 定义TabBarItem，并且定义两个插槽：图片、文字。 给两个插槽外层包装div，用于设置样式。 填充插槽，实现底部TabB
vue2.0 better-scroll 实现移动端滑动的示例代码
08-28
本篇文章主要介绍了vue2.0 better-scroll 实现移动端滑动的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
vue2.0实现购物车小案例
07-11
运用vue2.0实现的购物车demo，供大家共同学习参考,欢迎评论指正。
vue+mintUI实现移动端tabbar左右滑动切换
05-22
下载并解压到项目文件夹下，使用npm install安装依赖，使用npm run serve命令启动项目。
u-view 2.0 实现tab栏切换
柑橘乌云_
04-07 2218
因为swiper高度默认150px，swiper-item高度是100%,起初想让swiper-item中的内容吧swiper-item和其父元素高度撑开，理应将height设置成auto但是swiper的高度auto可以设置成功，但是swiper-item高度设置了auto始终是不成功（开发者工具中styles中显示出了但是就是不生效）u-view1.0是有一个 u-tabs-swiper 使用，但是2.0没有了，所以需要用u-tabs 加上 uni提供的原生swipper实现该效果。
Vue - tabbar(底部导航栏)
qq_33962481的博客
08-20 6926
文章目录一、TabBar实现思路二、assets文件夹2.1 在App.vue里面动态引用css文件三、基本搭建四、TabBar和TabBarItem组件封装4.1 TabBar组件封装4.2 TabBarItem组件封装 一、TabBar实现思路 定义一个TabBar组件 TabBar中显示的内容由外界决定 定义插槽 二、assets文件夹 assets文件夹里面存放的是一些css文件和img文件 在assets文件夹里面创建一个base.css, 配置取消网页默认的padding和ma
Vant组件库实现App里的TabBar标签栏
04-17 1062
构建产品的TabBar，支持高亮效果
微信小程序底部tabbar自定义带弧度效果完整版案例
xuanzhuan365的博客
04-30 2452
这是运行的效果： 新建components组件文件夹，里面新建tabbarComponent文件夹，结构如下： tabbar.js代码： // tabBarComponent/tabBar.js const app = getApp(); Component({ /** * 组件的属性列表 */ properties: { tabbar: { type: Object, value: { "backgroundColor": "#f
vue2封装tabbar组件
weixin_57399180的博客
06-01 433
使用vue2封装一个tabbar组件： 目录结构：
vue3+vant移动端tabbar
07-11
对于Vue 3和Vant移动端TabBar的使用，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Vue 3和Vant。你可以使用以下命令来安装它们： ```bash npm install vue@next vant ``` 2. 在你的Vue项目中，创建一个新的组件文件，例如`TabBar.vue`。 3. 在`TabBar.vue`文件中，引入Vue和Vant的相关组件和样式： ```javascript <template> <div> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" to="/"> 首页 </van-tabbar-item> <van-tabbar-item icon="search" to="/search"> 搜索 </van-tabbar-item> <van-tabbar-item icon="star-o" to="/favorites"> 收藏 </van-tabbar-item> <van-tabbar-item icon="contact" to="/profile"> 个人中心 </van-tabbar-item> </van-tabbar> </div> </template> <script> import { Tabbar, TabbarItem } from 'vant'; export default { components: { [Tabbar.name]: Tabbar, [TabbarItem.name]: TabbarItem, }, data() { return { active: '/', }; }, }; </script> <style> /* 这里可以添加自定义样式 */ </style> ``` 4. 在你的主应用组件中，例如`App.vue`，使用`TabBar`组件： ```html <template> <div id="app"> <!-- 其他内容 --> <TabBar /> </div> </template> <script> import TabBar from './components/TabBar.vue'; export default { components: { TabBar, }, }; </script> <style> /* 这里可以添加全局样式 */ </style> ``` 5. 最后，你可以根据自己的需要在`TabBar.vue`中设置每个Tab项的图标、文字和链接。你还可以通过修改`active`的值来控制当前选中的Tab。 这样，你就可以在Vue 3项目中使用Vant移动端的TabBar了。记得根据自己的需求进行样式和功能的调整。希望对你有帮助！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值