系列文章:
顶部标题
顶部标题很简单,就不单独封装组件了。直接使用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
}
}
发表评论