export const getUserChannelsAPI = () =>axios({
url:"/v1_0/user/channels",
method:'GET',
headers:{
// 不强制用户登录,匿名用户返回后台设置的默认频道列表
// 用户Token,未登录用户为空
Authorization: `Bearer ${getToken()}`
}
})
<template>
<!-- 坑: postcss只能翻译style里css样式代码, 标签内行内样式它无法转换px转rem, 所以需要自己手动计算 -->
<div>
<van-nav-bar fixed>
<template v-slot:left>
<img src="../../assets/logo.png" alt="" class="logo" />
</template>
<template #right>
<van-icon name="search" size="0.48rem" color="#fff" />
</template>
</van-nav-bar>
<!-- 导航 -->
<div class="main">
<van-tabs v-model="active" sticky offset-top="1.2266667rem">
<van-tab
:title="obj.name"
v-for="obj in userChannelList" :key="obj.id">内容 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>
</div>
</div>
</template>
<script>
import { getUserChannelsAPI } from "../../api/api";
export default {
data() {
return {
active: 0,
userChannelList:[],// 定义一个变量,获取频道列表数据(因为数据都在res中)
};
},
created() {
try {
const res = getUserChannelsAPI();
console.log(res);
// 保存数组,去上面循环
// this.userChannelList = res.data.data.channles
} catch (error) {
}
},
};
</script>
<style scoped>
.logo {
width: 100px;
height: 30px;
}
.main {
padding-top: 46px;
}
</style>