十一、案例：TabBar的封装

0、案例效果演示：

一、TabBar实现思路

如果在下方有一个单独的TabBar组件，你如何封装
自定义TabBar组件，在APP中使用
让TabBar出于底部，并且设置相关的样式
TabBar中显示的内容由外界决定
定义插槽
flex布局平分TabBar
自定义TabBarItem，可以传入图片和文字
定义TabBarItem，并且定义两个插槽：图片、文字。
给两个插槽外层包装div，用于设置样式。
填充插槽，实现底部TabBar的效果
传入高亮图片
定义另外一个插槽，插入active-icon的数据
定义一个变量isActive，通过v-show来决定是否显示对应的icon
TabBarItem绑定路由数据
安装路由：npm install vue-router —save
完成router/index.js的内容，以及创建对应的组件
main.js中注册router
APP中加入<router-view>组件
点击item跳转到对应路由，并且动态决定isActive
监听item的点击，通过this.$router.replace()替换路由路径
通过this.$route.path.indexOf(this.link) !== -1来判断是否是active
动态计算active样式
封装新的计算属性：this.isActive ? {‘color’: ‘red’} : {}

目录结构：

完整代码如下：

十一、案例：TabBar的封装相关推荐

指针||指针和数组||指针和函数||指针、数组、函数案例描述：封装一个函数，利用冒泡排序，实现对整型数组的升序排序
指针指针的基本概念指针的作用: 可以通过指针间接访问内存内存编号是从0开始记录的,一般用十六进制数字表示可以利用指针变量保存地址指针变量的定义和使用指针变量定义语法: 数据类型 * 变量名 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
Vue(小码哥王洪元)笔记07路由案例tabbar
1.tabbar案例01 进行了简单的布局 1.创建一个样式文件base.css body{margin:0; padding: 0;} 2.修改App.vue <template>< ...
Tabbar组件封装
TabBar实现思路 1.如果在下方有一个单独的TabBar组件,你如何封装自定义TabBar组件,在APP中使用让TabBar出于底部,并且设置相关的样式 2.TabBar中显示的内容由外界决定 ...
canvas：心率图案例 + ES5/ES6封装该案例
主要目的是练习:ES5中函数的封装和 ES6中class类的封装 1.没有封装 <body><style>canvas {border: 1px skyblue solid; ...
Vue2.0开发之——购物车案例-Footer组件封装-计算商品的总价格(51)
一概述 App.vue中计算勾选商品的总价格定义子组件Footer中的商品总价格将App.vue中商品的总价格传递给Footer显示二 App.vue中计算勾选商品的总价格 2.1 商品总价格 ...
案例，使用封装实现电子宠物系统的企鹅类正确输入健康值和亲密度
要求保证健康值的有效性(0-100),否则取默认值60 保证亲密度的有效性(0-100),否则取默认值60 步骤一. public class Penguin {private String nam ...
python-面向对象-05_面向对象封装案例 II
面向对象封装案例 II 目标士兵突击案例身份运算符封装封装是面向对象编程的一大特点面向对象编程的第一步 -- 将属性和方法封装到一个抽象的类中外界使用类创建对象, ...
Python之面向对象封装案例
面向对象封装案例目标封装小明爱跑步存放家具封装封装是面向对象编程的一大特点面向对象编程的第一步 -- 将属性和方法封装到一个抽象的类中外界使用类创建对象,然后 ...

十一、案例：TabBar的封装

0、案例效果演示：

一、TabBar实现思路

十一、案例：TabBar的封装相关推荐

最新文章

热门文章