第四节
- 底部导航
- vuex --参考:vuex 使用总结(详解)
- 登陆验证、用户注册 --这里是使用vuex模拟数据库里的读存操作(结合真实数据库请参考【全栈初体验】Vue+Node+MySQL实现前后端分离开发)
- demo地址 :第四节
- 请 结合代码 看以下文字,建议 从第一节看起
- 这些文章都看完之后,可以看一下 猫眼升级版 技术栈:vue-cli3 + typescript + axios
底部导航
-
菜单样式为图标和字体的组合,布局使用弹性盒子即可。
-
图标用到了iconfont,所以将其封装成了本地组件以供使用, 参考:vue中手动封装iconfont组件
-
点击相应tab,首先要改变状态,然后使用
$emit
跟父组件通信,告诉他我点击了什么按钮。// 文件路径:src/components/pageFooter.vue <template> <div class="nav"> <ul class="icon"> <li @click="changeTab('film')"> <icon :name="''" :iconStyle="activeTab === 'film'? iconStyleActive : iconStyle"></icon> <span class="text">电影</span> </li> <li @click="changeTab('cinema')"> <icon :name="''" :iconStyle="activeTab === 'cinema'? iconStyleActive : iconStyle"></icon> <span class="text">影院</span> </li> <li @click="changeTab('mine')"> <icon :name="''" :iconStyle="activeTab === 'mine'? iconStyleActive : iconStyle"></icon> <span class="text">我的</span> </li> </ul> </div> </template> <