Vue移动端系列 =＞ [04] 首页-文章列表

最新推荐文章于 2023-06-11 19:27:07 发布
最新推荐文章于 2023-06-11 19:27:07 发布
阅读量695 收藏 2
点赞数 1
分类专栏： # 【Vue2移动端项目】 文章标签： vue vant 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/109513016
版权

四、首页—文章列表

页面布局

头部导航栏

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>

频道列表

使用 Tab 标签页组件

参考：Tab 标签页组件

  1. 实现滑动导航

    <!--
通过v-model绑定当前激活标签对应的索引值，默认情况下启用第一个标签
通过animated属性可以开启切换标签内容时的转场动画
通过swipeable属性可以开启滑动切换标签页
-->
<van-tabs v-model="active" animated swipeable>
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

  2. 定义active

样式调整

基础样式调整
  • 标签项
    • 右边框
    • 下边框
    • 宽高
    • 文字大小
    • 文字颜色
  • 底部条
    • 宽高
    • 颜色
    • 位置
/deep/ .channel-tabs {
 .van-tab {
   border-right: 1px solid #EDEFF3;
   min-width: 200px;
   height: 80px;
   .van-tab__text {
     font-size: 27px;
     color: #777777;
   }
 }

 .van-tab--active .van-tab__text{
   color: #333 !important;
 }
 .van-tabs__line {
   width:31px !important;
   height:6px;
   background:rgba(50,150,250,1);
   border-radius:3px;
   bottom: 8px;
 }
 .van-tabs__nav {
   padding: 0;
 }
}
处理汉堡按钮

7:27建议暂停

1、使用插槽插入内容

<van-tabs class="channel-tabs" v-model="active" animated swipeable>
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
    <div slot="nav-right" class="hamburger-btn">
        <i class="toutiao toutiao-gengduo"></i>
    </div>
</van-tabs>

2、样式调整

  • 定位
  • 内容居中
  • 宽高
  • 背景色、透明度
  • 字体图标大小
.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;
  }
}

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

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

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

<van-tabs class="channel-tabs" v-model="active" animated swipeable>
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
    <van-tab title="标签 4">内容 4</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>

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

展示频道列表

思路：

  1. 找数据接口
  2. 把接口封装为请求方法
  3. 在组件中请求获取数据
  4. 模板绑定
1、封装请求接口
/**
 * 获取用户自己的信息
 */
export const getUserChannels = () => {
  return request({
    method: 'GET',
    url: '/app/v1_0/user/channels'
  })
}
2、请求获取数据
<script>
// 1. 导入 获取频道列表的方法
import { getUserChannels } from '@/api/user'
export default {
  name: 'home',
  data () {
    return {
      active: 1,
      // 4. 定义数据接收频道列表
      channels: []
    }
  },

  created () {
    // 3. 调用获取频道列表
    this.loadChannels()
  },

  methods: {
    // 2. 定义加载频道列表数据的方法
    async loadChannels () {
      try {
        const { data } = await getUserChannels()
        this.channels = data.data.channels
      } catch (err) {
        this.$toast('获取频道列表数据失败')
      }
    }
  }
}
</script>
3、模板绑定

v-for 必须要绑定:KEY值,因为这样会有唯一标识,然后diff算法,把我的新旧虚拟DOM树对比,然后只要部分更新就可以了,减少性能耗损

<van-tabs class="channel-tabs" v-model="active" animated swipeable>
    <van-tab
             v-for="item in channels"
             :key="
                   item.id"
             :title="item.name">
        {{ item.name }}
    </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>

文章列表

思路分析

你的思路可能是这样的：

1、找到数据接口

2、封装请求方法

3、在组件中请求获取数据，将数据存储到 data 中

4、模板绑定展示

根据不同的频道加载不同的文章列表，你的思路可能是这样的：

  • 有一个 list 数组，用来存储文章列表
  • 查看 a 频道：请求获取数据，让 list = a 频道文章
  • 查看 b 频道：请求获取数据，让 list = b 频道文章
  • 查看 c 频道：请求获取数据，让 list = c 频道文章
  • …

思路没有问题，但是并不是我们想要的效果。

我们想要的效果是：加载过的数据列表不要重新加载。

实现思路也非常简单，就是我们准备多个 list 数组，每个频道对应一个，查看哪个频道就把数据往哪个频道的列表数组中存放，这样的话就不会导致覆盖问题。

可是有多少频道就得有多少频道文章数组，我们都一个一个声明的话会非常麻烦，所以这里的建议是利用组件来处理。

具体做法就是：

  • 封装一个文章列表组件
  • 然后在频道列表中把文章列表遍历出来

因为文章列表组件中请求获取文章列表数据需要频道 id，所以 频道 id 应该作为 props 参数传递给文章列表组件，为了方便，我们直接把频道对象传递给文章列表组件就可以了。

在文章列表中请求获取对应的列表数据，展示到列表中。

最后把组件在频道列表中遍历出来，就像下面这样。

1、创建 src/views/home/components/article-list.vue

<template>
  <div class="article-list">文章列表</div>
</template>

<script>
export default {
  name: 'ArticleList',
  components: {},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less"></style>

2、在 home/index.vue 中注册使用

// 1.导入外部组件
import ArticleList from '@/components/article/article-list.vue';

html:<van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
        <!-- 3.自定义组件使用 -->
        <article-list />
      </van-tab>

js:  components: {
    ArticleList,
  },

3、最后测试。

答疑：

  • 为什么标签内容是懒渲染的？
    • 因为这是 Tab 标签页组件本身支持的默认功能，如果不需要可以通过配置 :lazy-render="false" 来关闭这个效果。

使用 List 列表组件

List 列表组件：瀑布流滚动加载，用于展示长列表。

List 组件通过 loading 和 finished 两个变量控制加载状态，
当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 设置成 true，此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

  • load 事件：
    • List 初始化后会触发一次 load 事件，用于加载第一屏的数据。
    • 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。
  • loading 属性：控制加载中的 loading 状态
    • 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）
    • 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件
  • finished 属性：控制加载结束的状态
    • 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束
    • 所有数据加载结束，finished 为 true，此时不会触发 load 事件
<template>
  <div class="article-list">
    <!--
      List 列表组件：瀑布流滚动加载，用于展示长列表。

      List 组件通过 loading 和 finished 两个变量控制加载状态，
      当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 自动设置成 true，此时可以发起异步操作并更新数据，
      数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

      - load 事件：
        + List 初始化后会触发一次 load 事件，用于加载第一屏的数据。
        + 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。

      - loading 属性：控制加载中的 loading 状态
        + 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）
        + 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件

      - finished 属性：控制加载结束的状态
        + 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束
        + 所有数据加载结束，finished 为 true，此时不会触发 load 事件
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  components: {},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false // 控制数据加载结束的状态
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 初始化或滚动到底部的时候会触发调用 onLoad
    onLoad () {
      console.log('onLoad')
      // 1. 请求获取数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 2. 把请求结果数据放到 list 数组中
        for (let i = 0; i < 10; i++) {
          // 0 + 1 = 1
          // 1 + 1 = 2
          // 2 + 1 = 3
          this.list.push(this.list.length + 1)
        }

        // 3. 本次数据加载结束之后要把加载状态设置为结束
        //     loading 关闭以后才能触发下一次的加载更多
        this.loading = false

        // 4. 判断数据是否全部加载完成
        if (this.list.length >= 40) {
          // 如果没有数据了，把 finished 设置为 true，之后不再触发加载更多
          this.finished = true
        }
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less"></style>

给home组件设置padding

.home-container {
  padding-bottom: 100px;
}

加载文章列表数据

实现思路：

  • 找到数据接口
  • 封装请求方法
  • 请求获取数据
  • 模板绑定

1、创建 src/api/article.js 封装获取文章列表数据的接口

/**
 * 文章接口模块
 */
import request from '@/utils/request'

/**
 * 获取频道的文章列表
 */
export const getArticles = params => {
  return request({
    method: 'GET',
    url: '/app/v1_1/articles',
    params
  })
}

注意：使用接口文档中最下面的 频道新闻推荐_V1.1

请求的是V1_1所以需要把url.config.js的baseURL后面删掉,然后把其他的前面加V1_0或者V1_1/

export default {
  token: 'TOUTIAO_TOKEN',
  baseURL: 'http://ttapi.research.itcast.cn/app/',
  login: 'v1_0/authorizations',
  smsCodes: 'v1_0/sms/codes/',
  // 获取用户个人数据
  getUserInfo: 'v1_0/user',
  // 获取nav导航
  channels: 'v1_0/user/channels',
  // 获取推荐新闻
  article: 'v1_1/articles', // 注意这里的参数后面是要加s
};

2、然后在首页文章列表组件 onload 的时候请求加载文章列表

<template>
  <div class="article-list">
      <!--
        loading 控制上拉加载更多的 loading 状态
        finished 控制数据是否加载结束
        load 事件：当触发上拉加载更多的时候会触发调用 load 事件

        List 初始化后会触发一次 load 事件，用于加载第一屏的数据
        如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(article, index) in list"
          :key="index"
          :title="article.title"
        />
      </van-list>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'

export default {
  name: 'ArticleList',
  components: {},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 文章列表数据
      loading: false, // 上拉加载更多的 loading 状态
      finished: false, // 是否加载结束
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 当触发上拉加载更多的时候调用该函数
    async onLoad () {
      try {
        // 1. 请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id, // 频道 id
          timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less"></style>

最后测试。

处理响应结果

<template>
  <div class="article-list">
      <!--
        loading 控制上拉加载更多的 loading 状态
        finished 控制数据是否加载结束
        load 事件：当触发上拉加载更多的时候会触发调用 load 事件

        List 初始化后会触发一次 load 事件，用于加载第一屏的数据
        如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(article, index) in list"
          :key="index"
          :title="article.title"
        />
      </van-list>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'

export default {
  name: 'ArticleList',
  components: {},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 文章列表数据
      loading: false, // 上拉加载更多的 loading 状态
      finished: false, // 是否加载结束
      timestamp: null // 请求下一页数据的时间戳
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 当触发上拉加载更多的时候调用该函数
    async onLoad () {
      try {
        // 1. 请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id, // 频道 id
          timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })

        // 2. 把数据添加到 list 数组中
        const { results } = data.data
        this.list.push(...results)

        // 3. 设置本次加载中 loading 状态结束
        this.loading = false

        // 4. 判断数据是否加载结束
        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          // 没有数据了，设置加载状态结束，不再触发上拉加载更多了
          this.finished = true
        }
      } catch (err) {
      }
    }
  }
}
</script>

<style scoped lang="less"></style>

最后测试。

处理失败结果

<template>
  <div class="article-list">
      <!--
        loading 控制上拉加载更多的 loading 状态
        finished 控制数据是否加载结束
        load 事件：当触发上拉加载更多的时候会触发调用 load 事件

        List 初始化后会触发一次 load 事件，用于加载第一屏的数据
        如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <van-cell
          v-for="(article, index) in list"
          :key="index"
          :title="article.title"
        />
      </van-list>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'

export default {
  name: 'ArticleList',
  components: {},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 文章列表数据
      loading: false, // 上拉加载更多的 loading 状态
      finished: false, // 是否加载结束
      error: false, // 是否加载失败
      timestamp: null // 请求下一页数据的时间戳
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 当触发上拉加载更多的时候调用该函数
    async onLoad () {
      try {
        // 1. 请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id, // 频道 id
          timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })

        // 2. 把数据添加到 list 数组中
        const { results } = data.data
        this.list.push(...results)

        // 3. 设置本次加载中 loading 状态结束
        this.loading = false

        // 4. 判断数据是否加载结束
        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          // 没有数据了，设置加载状态结束，不再触发上拉加载更多了
          this.finished = true
        }
      } catch (err) {
        console.log(err)
        this.loading = false // 关闭 loading 效果
        this.error = true // 开启错误提示
      }
    }
  }
}
</script>

<style scoped lang="less"></style>

下拉刷新

这里主要使用到 Vant 中的 PullRefresh 下拉刷新 组件。

思路：

  • 注册下拉刷新事件（组件）的处理函数
  • 发送请求获取文章列表数据
  • 把获取到的数据添加到当前频道的文章列表的顶部
  • 提示用户刷新成功！
使用下拉刷新组件
<van-pull-refresh
    :success-text="refreshSuccessText"
    :success-duration="1500"
    v-model="isRefreshLoading"
    @refresh="onRefresh">
    <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              >
        <van-cell
                  v-for="(article, index) in list"
                  :key="index"
                  :title="article.title"
                  />
    </van-list>
</van-pull-refresh>

定义相应数据

return {
    list: [], // 存储列表数据的数组
    loading: false, // 控制加载中 loading 状态
    finished: false, // 控制数据加载结束的状态
    timestamp: null,
    error: false, // 是否加载失败
    isRefreshLoading: false,
    refreshSuccessText: ''
}
定义下拉方法

下拉刷新时会触发组件的 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

// 当触发下拉刷新的时候调用该函数
async onRefresh () {
  try {
    // 1. 请求获取数据
    const { data } = await getArticles({
      channel_id: this.channel.id, // 频道 id
      timestamp: Date.now(), // 下拉刷新每次都应该获取最新数据
      with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
    })

    // 2. 将数据追加到列表的顶部
    const { results } = data.data
    this.list.unshift(...results)

    // 3. 关闭下拉刷新的 loading 状态
    this.isRefreshLoading = false

    // 提示成功
    this.refreshSuccessText = `刷新成功，更新了${results.length}条数据`
  } catch (err) {
    console.log(err)
    this.isRefreshLoading = false // 关闭下拉刷新的 loading 状态
    this.$toast('刷新失败')
  }
}

头部固定定位

  1. 头部导航固定定位

    <!-- 导航栏 -->
<van-nav-bar class="page-nav-bar" fixed></van-nav-bar>
<!-- /导航栏 -->

  2. 固定tabs

    .van-tabs__wrap {
  position: fixed;
  top: 92px;
  z-index: 2;
  width: 100%;
}

  3. 页面撑高

    padding-top: 180px;

记录滚动位置

给每个列表设置独自的滚动区域,而现在滚动区域是公共的body

.artcile-list {
  height: 79vh;
  overflow: auto;
}

文章列表项

准备组件

在我们项目中有好几个页面中都有这个文章列表项内容，如果我们在每个页面中都写一次的话不仅效率低而且维护起来也麻烦。所以最好的办法就是我们把它封装为一个组件，然后在需要使用的组件中加载使用即可。

1、创建 src/components/article-item/index.vue 组件

<template>
  <div class="article-item">文章列表项</div>
</template>

<script>
export default {
  name: 'ArticleItem',
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less"></style>

2、在文章列表组件中注册使用文章列表项组件

展示列表项内容

  • 使用 Cell 单元格组件
  • 展示标题
  • 展示底部信息
<template>
  <van-cell
    class="article-item"
  >
    <div slot="title" class="title">{{ article.title }}</div>
    <div slot="label">
      <div v-if="article.cover.type === 3" class="cover-wrap">
        <div
          class="cover-item"
          v-for="(img, index) in article.cover.images"
          :key="index"
        >
          <van-image
            width="100"
            height="100"
            :src="img"
          />
        </div>
      </div>
      <div>
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate }}</span>
      </div>
    </div>
    <van-image
      v-if="article.cover.type === 1"
      slot="default"
      width="100"
      height="100"
      :src="article.cover.images[0]"
    />
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less"></style>

样式调整

  • 文章标题
    • 字号
    • 颜色
    • 多行文字省略
  • 单图封面
    • 封面容器
      • 去除 flex: 1，固定宽高
      • 左内边距
    • 封面图
      • 宽高
      • 填充模式：cover
  • 底部文本信息
    • 字号
    • 颜色
    • 间距
  • 多图封面
    • 外层容器
      • flex 容器
      • 上下外边距
    • 图片容器
      • 平均分配容器空间：flex: 1;
      • 固定高度
      • 容器项间距
    • 图片
      • 宽高
      • 填充模式

以下代码仅供参考。

<template>
  <van-cell
    class="article-item"
  >
    <div slot="title" class="title van-multi-ellipsis--l2">{{ article.title }}</div>
    <div slot="label">
      <div v-if="article.cover.type === 3" class="cover-wrap">
        <div
          class="cover-item"
          v-for="(img, index) in article.cover.images"
          :key="index"
        >
          <van-image
            class="cover-item-img"
            fit="cover"
            :src="img"
          />
        </div>
      </div>
      <div class="label-info-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate }}</span>
      </div>
    </div>
    <van-image
      v-if="article.cover.type === 1"
      slot="default"
      class="right-cover"
      fit="cover"
      :src="article.cover.images[0]"
    />
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.article-item {
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }

  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }

  .right-cover {
    width: 232px;
    height: 146px;
  }

  .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }

  .cover-wrap {
    display: flex;
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-img {
        width: 100%;
        height: 146px;
      }
    }
  }
}
</style>

关于第三方图片资源403问题

为什么文章列表数据中的好多图片资源请求失败返回 403？

这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。

第三方平台怎么处理图片资源保护的？

服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。

Referer 是什么东西？

扩展参考：http://www.ruanyifeng.com/blog/2019/06/http-referer.html

Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含了当前请求资源的来源页面的地址。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。

需要注意的是 referer 实际上是 “referrer” 误拼写。参见 HTTP referer on Wikipedia （HTTP referer 在维基百科上的条目）来获取更详细的信息。

怎么解决？

不要发送 referrer ，对方服务端就不知道你从哪来的了，姑且认为是你是自己人吧。

如何设置不发送 referrer？

用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略，例如：

<img src="http://……" referrerPolicy="no-referrer">

或者直接在 HTMl 页面头中通过 meta 属性全局配置：

<meta name="referrer" content="no-referrer" />

处理相对时间

推荐两个第三方库：

两者都是专门用于处理时间的 JavaScript 库，功能差不多，因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些，因为它采用了插件化的处理方式。

Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。

  • Day.js 可以运行在浏览器和 Node.js 中。

  • 🕒 和 Moment.js 相同的 API 和用法

  • 💪 不可变数据 (Immutable)

  • 🔥 支持链式操作 (Chainable)

  • 🌐 国际化 I18n

  • 📦 仅 2kb 大小的微型库

  • 👫 全浏览器兼容

基本使用

1、安装

npm i dayjs

2、使用最基本的dayjs

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 中文化

dayjs.locale('zh-cn') //中文化

console.log(dayjs().format('YYYY-MM-DD'))

3、在 main.js 中加载初始化

import './utils/dayjs'
使用dayJs处理时间

1、定义过滤器

import Vue from 'vue'
import dayjs from 'dayjs'

// 加载中文语言包
import 'dayjs/locale/zh-cn'

import relativeTime from 'dayjs/plugin/relativeTime'

// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)

// 配置使用中文语言包
dayjs.locale('zh-cn')

// 全局过滤器：处理相对时间
Vue.filter('relativeTime', value => {
    return dayjs().to(dayjs(value))
})

2、使用过滤器：

<p>{{ 日期数据 | relativeTime }}</p>
不停喝水
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 项目源码
08-07
一个公司做的vue项目，基本vue的功能都用到了，源码请勿举报
mobile-web:Vue移动端案例项目
04-15
移动网络 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 自定义配置 请参阅。
Vue从详情页返回列表页，页面定位到该详情页对应列表项位置
xiu52t的博客
02-26 2605
需求描述 从列表页，进入详情页面，点击返回按钮，定位到原始列表页中对应详情列表项位置。 实现方案 列表页：使用锚点定位实现。列表页dom挂载完成后，判断路由是否有hash，若有页面定位到对应hash的列表项。 <template> <div> <ul> <li v-for="item in list" :key="item.id" :id=...
文章列表汇总
。
08-10 534
技术文章列表汇总
在线博客系统——文章列表
huing的博客
07-03 1130
目录接口说明数据表结构Dao持久层pojo实体类mapper接口service业务逻辑层接口url：/articles请求方式：POST请求参数：返回数据json: 数据表结构 文章表： 文章内容表： 文章分类表： 标签表： 文章、标签关联表：通过文章id可以间接查到标签id 用户表： Dao持久层 pojo实体类 Article： 文章内容ArticleBody： 类别表Category ： 用户SysUser: 标签Tag： mappe
（翻译）文章列表（Article List）
gc_2299的博客
08-26 3984
问题概述   指导用户找到其感兴趣的内容，仅靠分层导航无法实现这个目标
vant2之List列表
qq_43630409的博客
12-10 1851
LIst列表——瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。常用于移动端项目
vue项目——文章列表模块
李公子的博客
09-03 1721
创建组件并配置路由 我们首先在views文件夹下面创article文件夹 里面存放的是文章列表组件 并在组件中配置了路由信息 { path: '/home', component: () => import('@/views/home/Home.vue'), children: [ { path: '', component: () => import('@/views/home/in...
VUE3+GO个人博客系统:文章列表页和详情页的实现
sybh的博客
06-11 736
在构建个人博客系统时，文章列表页和详情页是必不可少的两个界面。文章列表页用于展示所有文章的简略信息，详情页则用于显示文章的全文内容。在本篇博客中，我们将使用 Vue 3 作为前端框架，Go 作为后端语言，MySQL 作为数据库，来构建这两个页面。
16 个优秀的 Vue 开源项目
jjxp2011的专栏
04-14 1898
最初，该产品是作为编写技术文档的工具而创建的，但现在它是一个小型、紧凑、功能强大的headless CMS。它也是模块化的，所以你可以只使用你的apage所需要的模块简而言之,Nu xt 将您从构建和优化您的apage的工作中拯救出来Nuxt. js 具有模块化的架构,有50多个模块可供选择。这是特别有价值的，因为团队有一个清晰的路线图，所以你作为一个贡献者可以选择你可以做的任务。Vue是结合react和angular的最好的方法，并且拥有一个有凝聚力的，活跃的，能够应对开发问题的大型社区。
前端框架vue实现的一个类似今日头条的移动端项目
09-12
主要功能： 资讯列表、文章举报，频道管理、文章详情、相关反馈功能、搜索功能、登录功能、个人中心、编辑资料，后期结合 H5+可在 Dcloud 打包成一款体验较好的手机应用。
vue-admin:使用 vue-cli3 搭建的vue-vuex-router-element 开发模版，集成常用组件，功能模块
04-14
vue-admin相关文章项目安装依赖npm installdevelopment 模式启动npm run serveproduction 模式构建npm run buildproduction 模式打包体积分析npm run analyzeeslint 检查npm run lint组件生成npm run new:comp页面...
vue2.0 better-scroll 实现移动端滑动的示例代码
01-19
上一篇文章实现了滑动效果，这部分来试试左右联动效果的实现方法吧 效果：滑动右侧时，左侧也能有相应的变化；点击左侧时，右侧也能自动定位到相应的位置。 如下图所示界面，左侧为分栏，右侧为分栏详情。 滑动右边...
blog-vue-typescript：vue +打字稿+ element-ui支持markdown渲染的博客前台展示
02-03
效果效果图： pc端移动端完整效果请看： : 功能已经完成功能登录注册文章列表文章摘要标签关于点赞与评论留言历程文章详情（支持代码语法高亮）文章详情目录移动端适应 github授权登录待优化或者实现笔者也是刚学的...
toutiao-m:基于 Vue.js 开发的移动端项目——黑马头条（页面下方扫码体验）
04-28
Vue.js 移动端项目——黑马头条 扫码体验 相关资源 GitHub 仓库： 学习笔记： 接口文档： 在线预览： 功能列表 登录注册 首页 频道列表 文章列表 频道编辑 搜索 联想建议 搜索历史记录 搜索结果 文章详情 ...
Failed to load resource: the server responded with a status of 401 (UNAUTHORIZED) 解决token失效 401错误码
热门推荐
Write less，do more
11-09 1万+
在这里我们要对别人的错误状态进行判断,来使用刷星token 解决token失效的 401的问题, 让别人在后台看不见的地方,登陆失败,然后里面调用这里的请求,再获取最新的token值,然后重新设置到我们的本地存储里面去 import axios from 'axios'; import config from '@/config/url.config'; import { setItem, getItem } from '@/utils/storage'; const request = axios.cr
Vant =＞ van-field校验手机号 邮箱校验
Write less，do more
06-28 4303
关键代码 /^1[3456789]\d{9}$/ 栗子： <template> <van-form @submit="onSubmit"> <van-field v-model="phonenumber" :rules="[ { required: true, message: '请填写您的手机号码！' }, { pattern: /^1
Vue移动端系列 =＞ [03] 个人中心
Write less，do more
11-05 2047
三、个人中心 TabBar 处理 通过分析页面，我们可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。 父路由：一个空页面，包含一个 tabbar，中间留子路由出口 子路由 首页 问答 视频 我的 一、创建 tabbar 组件并配置路由 这里主要使用到的 Vant 组件： Tabbar 标签栏 1、创建 src/views/layout/index.vue <templat
Vue移动端系列 =＞ [02] 登陆注册
Write less，do more
11-02 787
二、登录注册 目标 能实现登录页面的布局 能实现基本登录功能 能掌握 Vant 中 Toast 提示组件的使用 能理解 API 请求模块的封装 能理解发送验证码的实现思路 能理解 Vant Form 实现表单验证的使用 准备 创建组件并配置路由 1、创建 src/views/login.vue 并写入以下内容 <template> <div class="login">登录页面</div> </template> <script> e
vue中item =>
最新发布
06-15
在 Vue 中，`item =>`通常是箭头函数的语法，用于声明一个匿名函数。在许多情况下，我们会在 Vue 组件的模板中使用 v-for 指令进行列表渲染，其中的 item 即为每次循环迭代中的当前元素。 例如，下面的代码片段使用 v-for 渲染了一个列表，其中的每个 item 都是一个对象，包含 name 和 age 两个属性： ```html <template> <div> <ul> <li v-for="item in list" :key="item.name"> {{ item.name }} is {{ item.age }} years old. </li> </ul> </div> </template> <script> export default { data() { return { list: [ { name: 'Alice', age: 23 }, { name: 'Bob', age: 28 }, { name: 'Charlie', age: 19 } ] } } } </script> ``` 在上述代码中，`item`即为 v-for 指令中的循环变量，代表当前遍历到的元素。在模板中，我们可以使用 `{{ item.name }}` 和 `{{ item.age }}` 来访问该元素的属性值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值