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

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

顶部标题

顶部标题很简单，就不单独封装组件了。直接使用vux的XHeader组件

<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;

底部导航

底部导航比较复杂，封装成一个组件，使用vux的Tabbar组件

• 在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切换

该部分使用vux的Tab、TabItem组件

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;
  }
}

文章列表

文章列表部分使用vux的Panel组件

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
  }
}