头条项目的文章列表

展示频道列表

先在 api目录下面文件封装请求方法

然后在 data里面定义变量用于存储数据

在 methods里定义获取数据方法。（页面导入这个方法，方法里面调用方法发送请求，请求成功赋值data里面变量）

在 created里面调用这个方法。

最后渲染。

api/user.js 里封装

export  const  getUserChannels = () => {return request({method: 'GET',url: '/v1_0/user/channels'})}

data里面定义变量

data(){return{channels:[]}}

methods定义方法

// 导入封装方法
import { getUserChannels } from '@/api/user'
 
methods: {
    async loadChannels () {
      try {
        // 发请求
        const { data } = await getUserChannels()
        // 成功赋值
        this.channels = data.data.channels
      } catch (err) {
        // 失败处理
        this.$toast('获取频道数据失败')
      }
    }
  }

生命周期created里面调用

created() {this.loadChannels()}

渲染数据

<van-tabs  class="channel-tabs" v-model="active" swipeable animated border>
 
    <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
          {{channel.name}}的内容
    </van-tab>
</van-tabs>