update:更新首页列表获取数据

src/api/index.js

@@ -14,20 +14,29 @@ export const getSendSms = (mobile) => {
 		method: "GET",
 		url   : `/app/v1_0/sms/codes/${mobile}`
 	});
-}
+};
 
 //获取登录用户信息
 export const getUserInfo = () => {
 	return request({
 		method: "GET",
 		url   : "/app/v1_0/user"
 	});
-}
+};
 
 //获取用户频道列表
 export const getUserChannels = () => {
 	return request({
 		method: "GET",
 		url   : "/app/v1_0/user/channels"
 	});
-}
+};
+
+//频道列表
+export const getArticles = (params) => {
+	return request({
+		method: "GET",
+		url   : "/app/v1_1/articles",
+		params
+	});
+};

src/views/home/components/article-list.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="article-cotainer" ref="article-list">
+		<van-list
+			v-model="loading"
+			:finished="finished"
+			finished-text="没有更多了"
+			@load="onLoad"
+		>
+			<van-cell
+				v-for="item in articles"
+				:key="item.id"
+				:title="item.title"
+			/>
+		</van-list>
+	</div>
+</template>
+
+<script>
+import { getArticles } from "@/api";
+
+export default {
+	name : "ArticleList",
+	props: {
+		channels: {
+			type    : Array,
+			required: true
+		}
+	},
+	data() {
+		return {
+			// 列表数据
+			articles : [],
+			// 是否加载中
+			loading  : false,
+			// 是否加载完成
+			finished : false,
+			// 时间戳
+			timestamp: 1556789000001
+		};
+	},
+	methods: {
+		async onLoad() {
+			console.log("sd");
+			const { data } = await getArticles({
+				channel_id: this.channels[0].id,
+				timestamp : this.timestamp || Date.now(),
+				with_top  : 1
+			});
+			const { results } = data;
+			this.articles.push(...results);
+			this.loading = false;
+			if (results.length) {
+				this.timestamp = data.pre_timestamp;
+			}
+			else {
+				this.finished = true;
+			}
+		}
+	},
+	created() {}
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/home/index.vue

@@ -12,28 +12,27 @@
 			>
 		</van-nav-bar>
 		<!-- 文章频道列表 -->
-		<van-tabs v-model="active" animated>
-			<van-tab
-				v-for="item in channels"
-				:title="item.name"
-				:key="item.id"
-			>
-        {{ item.name }}
+		<van-tabs v-model="active" animated  class="tbs-box">
+			<van-tab class="tab-btn" v-for="item in channels" :title="item.name" :key="item.id">
+				<!-- 文章列表 -->
+				<articleList :channels="channels" />
 			</van-tab>
 		</van-tabs>
 	</div>
 </template>
 
 <script>
 import { getUserChannels } from "@/api";
+import ArticleList from "./components/article-list.vue";
 export default {
-	name: "Home",
+	name      : "Home",
+	components: { ArticleList },
 	data() {
 		return {
 			// 当前选中的频道
-			active: 0,
+			active  : 0,
 			// 频道列表
-			channels: [],
+			channels: []
 		};
 	},
 	created() {
@@ -42,11 +41,17 @@ export default {
 	methods: {
 		// 加载频道列表
 		async loadChannels() {
-			const { data } = await getUserChannels();
-			this.channels = data.channels;
-			console.log(this.channels.name);
-		},
-	},
+			try {
+				const { data } = await getUserChannels();
+				this.channels = data.channels;
+				console.log(this.channels);
+			}
+			catch (error) {
+				this.$toast.fail(error.response.data.message);
+				console.log(error);
+			}
+		}
+	}
 };
 </script>
 
@@ -70,4 +75,21 @@ export default {
 		}
 	}
 }
+::v-deep.tbs-box{
+  position: fixed;
+  top: 50px;
+  left: 0;
+  right: 0;
+  height: 570px;
+  width: 100%;
+  overflow-y: auto;
+}
+::v-deep .van-tabs--line .van-tabs__wrap{
+  position: fixed;
+  top: 45px;
+  z-index:999
+}
+::v-deep .van-tabs__content{
+  margin-top: 40px;
+}
 </style>