首页—文章列表
#1、页面布局
#1.1、头部导航栏
1、使用导航栏组件
2、在导航栏组件中插入按钮
- 文本
- 图标
3、样式调整
- 宽高
- 背景色
- 边框
- 文本大小
- 图标大小
<template>
<div class="home-container">
<!-- 导航栏 -->
<van-nav-bar class="page-nav-bar" fixed>
<van-button
class="search-btn"
slot="title"
type="info"
size="small"
round
icon="search"
>搜索</van-button>
</van-nav-bar>
<!-- /导航栏 -->
</div>
</template>
<script>
export default {
name: 'HomeIndex',
components: {},
props: {},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">
.home-container {
/deep/ .van-nav-bar__title {
max-width: unset;
}
.search-btn {
width: 555px;
height: 64px;
background-color: #5babfb;
border: none;
font-size: 28px;
.van-icon {
font-size: 32px;
}
}
}
</style>
#2、频道列表
#2.1、使用 Tab 标签页组件
参考:Tab 标签页组件(opens new window)
#2.2、样式调整
(1)基础样式调整
- 标签项
- 右边框
- 下边框
- 宽高
- 文字大小
- 文字颜色
- 底部条
- 宽高
- 颜色
- 位置
(2)处理汉堡按钮
1、使用插槽插入内容
2、样式调整
- 定位
- 内容居中
- 宽高
- 背景色、透明度
- 字体图标大小
3、使用伪元素设置渐变边框
- 定位
- 宽高
- 背景图
- 背景图填充模式
4、添加占位符充当内容区域
HTML结构
<!-- 频道列表 -->
<!--
animated 滑动的动画
border 底边框线
swipeable 开启左右手势滑动
-->
<van-tabs class="channel-tabs" v-model="active" swipeable animated border>
<van-tab title="标签 1">内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1内容 1</van-tab>
<van-tab title="标签 2">内容 2内容 1内容 1内容 1内容 1内容 1内容 1</van-tab>
<van-tab title="标签 3">内容 3内容 1内容 1内容 1内容 1内容 1</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
<van-tab title="标签 6">内容 6</van-tab>
<van-tab title="标签 7">内容 7</van-tab>
<van-tab title="标签 8">内容 8</van-tab>
<!-- 右侧自定义内容 -->
<!-- 占位元素 -->
<div class="placeholder"></div>
<!-- 右侧按钮 -->
<template #nav-right>
<div class="hamburger-btn">
<i class="toutiao toutiao-gengduo"></i>
</div>
</template>
</van-tabs>
<!-- /频道列表 -->
CSS 样式:
/deep/ .channel-tabs {
.van-tab {
border-right: 1px solid #edeff3;
min-width: 200px;
font-size: 30px;
color: #777777;
}
.van-tab--active {
color: #333333;
}
.van-tabs__nav {
padding-bottom: 0;
}
.van-tabs__line {
bottom: 8px;
width: 31px !important;
height: 6px;
background-color: #3296fa;
}
.placeholder {
flex-shrink: 0;
width: 66px;
height: 82px;
}
.hamburger-btn {
position: fixed;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 66px;
height: 82px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.902);
i.toutiao {
font-size: 33px;
}
&:before {
content: "";
position: absolute;
left: 0;
width: 1px;
height: 58px;
background-image: url(~@/assets/gradient-gray-line.png);
background-size: contain;
}
}
}
注: 深度选择器 https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8
#2.3、展示频道列表
思路:
- 第1步:
api
目录下面文件封装请求方法- 第2步:data里面定义变量用于存储数据
- 第3步:methods里定义获取数据方法
- 3.1 页面里面导入这个方法
- 3.2 methods方法里面调用方法发送请求
- 3.3 请求错误处理
- 3.4 请求成功赋值data里面变量
- 第4步:created里面调用这个方法
- 第5步: 渲染数据
- 1
api/user.js
里面封装
/**
* 获取用户自己的信息
*/
export const getUserChannels = () => {
return request({
method: 'GET',
url: '/v1_0/user/channels'
})
}
- 2、data 里面定义变量
data () {
return {
channels: [] // 频道列表
}
},
- 3、methods 定义方法
// 导入封装方法
import { getUserChannels } from '@/api/user'
methods: {
async loadChannels () {
try {
// 发请求
const { data } = await getUserChannels()