这里主要是切换路由的一个结构,不涉及菜单等结构,底部tab,设置切换的路由
路径锦集
image.png
image.png
image.png
image.png
获取某个组件的高度
image.png
image.png
ES6
变量:let
属性=值:简写成属性
1 Tab切换页面栏(页面切换栏)
1.1 组件目录
components:非路由组件(TabBar)
pages:路由组件(index/cat/cart/user)

1.2 切换条结构
div.tabbar>ul>( li>(img+p) ) * 4
1.3 切换条布局
ul:{flex}
li:{flex:1}



注意:line-height行高是指每一行文字的高度,不适用多行居中
只有这只了字体的大小,才能等比缩放,否则就是默认的
1.4 添加点击事件,修改路由地址


1.5 使用路由对象
router/index.js
1)导入路由
2)导入相关组件
3)声明在Vue中使用路由
4)对外暴露一个路由对象

1.6 使用组件TabBar
App.vue
1)导入组件
2)注册组件
3)设置组件出口

1.7 使用路由对象
main.js
-
导入路由对象
2)声明路由对象
image.png
2 实现页面不占用切换工具条
App.vue(主页面的出口)
核心问题:切换条已经在页面上加载之后,才能获取它的高度和页面的高度
解决方法:生命周期函数



网友评论