Vue项目入门教程7-首页布局

系列文章:

顶部标题

顶部标题很简单,就不单独封装组件了。直接使用vuxXHeader组件

<template> <div> <x-header :left-options="{showBack: false}">首页</x-header> </div> </template> <script> import { XHeader } from 'vux' export default { components: { XHeader } } </script>

背景色目前是#35495e,改成#3eaf7c
修改src/assets/less/vux-theme.less文件,添加代码

@header-background-color: #3eaf7c;

底部导航

底部导航比较复杂,封装成一个组件,使用vuxTabbar组件

  • src/components/目录下新建目录common

  • src/components/common/目录下新建文件footer.vue

<template> <tabbar> <tabbar-item :selected="$route.path=='/'" link="/"> <svg-icon slot="icon" class="icon" icon-class="home" /> <span slot="label">首页</span> </tabbar-item> <tabbar-item :selected="$route.path=='/search'" link="/search"> <svg-icon slot="icon" class="icon" icon-class="search" /> <span slot="label">搜索</span> </tabbar-item> <tabbar-item :selected="$route.path=='/user'" link="/user"> <svg-icon slot="icon" class="icon" icon-class="user" /> <span slot="label">我的</span> </tabbar-item> </tabbar> </template> <script> import { Tabbar, TabbarItem } from 'vux' export default { components: { Tabbar, TabbarItem } } </script>

src/views/index.vue文件中引入公共的底部导航组件

<template> <div> <x-header :left-options="{showBack: false}">首页</x-header> <com-footer></com-footer> </div> </template> <script> import { XHeader } from 'vux' import comFooter from 'components/common/footer' export default { components: { XHeader, comFooter } } </script>

tab切换

该部分使用vuxTabTabItem组件

Html部分

<tab :line-width=2 v-model="tabActive"> <tab-item class="vux-center" v-for="(item, index) in category" :key="index" @on-item-click="handleTab(item)" >{{item.name}}</tab-item> </tab>

Javascript部分

import { XHeader, Tab, TabItem } from 'vux' // ... export default { data() { return { category: [], tabActive: 0, // ... } }, methods: { handleTab(item) { }, // ... }, components: { // ... Tab, TabItem } }

主体部分布局

首页分为四大块:顶部标题、tab切换、底部导航和主体部分
顶部标题、tab切换和底部导航都是固定的大小,剩下的都是主体部分

其他页面也是一样,我们做一个统一的布局,应用到各个页面

这里采用flex布局

  • 给页面添加类名:page

  • 主体部分的div类名:container

  • 修改src/assets/less/main.less,添加相关样式

html, body, #app{ height: 100%; } .page{ height: 100%; display: -webkit-box; -webkit-box-orient: vertical; .container{ position: relative; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow: hidden; } }

文章列表

文章列表部分使用vuxPanel组件

Html部分

<panel :list="list" type="5" @on-img-error="onImgError"></panel>

Javascript部分

import { XHeader, Tab, TabItem, Panel } from 'vux' // ... export default { data() { return { list: [], // ... } }, methods: { // ... onImgError (item, $event) { console.log(item, $event) } }, components: { // ... Panel } }

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: