Vue 移动端 实战四 首页-文章列表 头部导航、tab标签、list列表组件、dayjs插件、处理第三方图片资源问题

首页—文章列表

max-width: unset; // 取消使用
flex： unser // 取消使用flex

/deep/ 深度作用操作符！！！！！ 对于 scoped 为了影响里面所有的后代元素

flex-shrink: 1； 默认是 1 ，参与 flex布局的计算， 改为 0 就是不参与 flex的布局计算

vh 个 vw 单位 重点！！！！！！！！！！！！！！！！

1.0 页面布局

1.1 头部导航栏

1、使用导航栏组件

2、在导航栏组件中插入按钮

• 文本
• 图标

3、样式调整

• 宽高
• 背景色
• 边框
• 文本大小
• 图标大小

<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <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.0 频道列表

使用 Tab 标签页组件

参考：Tab 标签页组件

2.1 样式调整

（1）基础样式调整

• 标签项
  • 右边框
  • 下边框
  • 宽高
  • 文字大小
  • 文字颜色
• 底部条
  • 宽高
  • 颜色
  • 位置

（2）处理汉堡按钮

1、使用插槽插入内容

2、样式调整

• 定位
• 内容居中
• 宽高
• 背景色、透明度
• 字体图标大小

3、使用伪元素设置渐变边框

• 定位
• 宽高
• 背景图
• 背景图填充模式

4、添加占位符充当内容区域

    <!-- 标签页  swipeable -->  
    <van-tabs v-model="active" class="channel-tabs">
     <van-tab v-for="item in channels" :key="item.id" :title="item.name">
       <!-- 列表数据 -->
       <article-list :channel="item" class="article-list"></article-list>
     </van-tab>

     <div slot="nav-right" class="placeholder"></div>
     <div slot="nav-right" class="hamburger-btn">
       <i class="toutiao toutiao-gengduo"></i>
     </div>
    </van-tabs>

5. css样式

.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;
  opacity: 0.902;
  i.toutiao {
   
   
    font-size: 33px;
  }
  &:before {
   
   
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background-image: url(~@/assets/gradient-gray-line.png);
    background-size: contain;
  }
}

2.2 展示频道列表

思路：

1. 找数据接口
2. 把接口封装为请求方法
3. 在组件中请求获取数据
4. 模板绑定

1、封装数据请求接口

/**
 * 获取用户自己的信息
 */
export const getUserChannels = () => {
   
   
  return request({
   
   
    method: 'GET',
    url: '/app/v1_0/user/channels'
  })
}

2、请求获取数据

import {
   
    getUserChannels } from '@/api/user.js'

channels: [], //  频道数据
  
 methods: {
   
   
    async loadUserChannels() {
   
   
      try