修一下

pages/tutorial/tutorial.vue

@@ -1,6 +1,14 @@
 <template>
 	<view class="flex flex-column" style="width:100vw;height: 100vh;">
 		<i-loading v-if="loading" />
+		<scroll-view scroll-x class="scroll-row" style="height: 90rpx;" :scroll-with-animation="true"
+			:show-scrollbar="false">
+			<view class="scroll-row-item px-3" @click="changeTab(index)" v-for="(item,index) in tabBars"
+				:key="item.id">
+				<text style="line-height: 88rpx;" class="d-block"
+					:class="tabIndex === index ? 'font-weight700 font36 border-bottom border-danger text-danger':'font30'">{{item.name}}</text>
+			</view>
+		</scroll-view>
 		<view class="flex flex-column flex-1">
 			<scroll-view class="flex-1" :scroll-y="true" :refresher-enabled="true"
 				:refresher-triggered="refresh" @refresherrefresh="refreshData" @scrolltolower="loadData">
@@ -34,6 +42,13 @@
 		},
 		data() {
 			return {
+				tabIndex: 0,
+				tabBars: [
+					{
+						id: -1,
+						name: "全部",
+					}
+				],
 				newsList: [],
 				curPage: 1,
 				loading: true,
@@ -41,16 +56,39 @@
 				finish: false
 			}
 		},
+		onShow() {
+			this.loadCate();
+		},
 		methods: {
+			changeTab(idx) {
+				this.tabIndex = idx;
+				this.refresh = true;
+				this.loadData()
+			},
+			loadCate() {
+				TaAjax.get('/cms/api.category/index', {
+					pid: 1
+				}).then((result) => {
+					this.tabBars = [
+						{
+							id: -1,
+							name: "全部",
+						},
+						...result.data,
+					]
+				})
+			},
 			loadData() {
 				if (this.refresh) {
 					this.newsList.length = 0;
+					this.curPage = 1;
 					this.finish = false;
 				}
 				if (this.finish) {
 					return;
 				}
 				TaAjax.get('/cms/api.tutorial/index', {
+					cid: this.tabBars[this.tabIndex].id,
 					page: this.curPage
 				}).then((result) => {
 					const data = result.data;