zyw

huinongbao-app/package-lock.json

@@ -16201,6 +16201,7 @@
           "url": "http://opencollective.com/swiper"
         }
       ],
+      "license": "MIT",
       "engines": {
         "node": ">= 4.7.0"
       }

huinongbao-app/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { RecommendedPostsModule } from './tab1/recommended-posts/recommended-pos
 import { PostsModule } from './tab1/posts/posts.module';
 import { ColloctModule } from './colloct/colloct.module';
 import { GzModule } from './gz/gz.module';
+import { Tab1PageModule } from './tab1/tab1.module';
 
 
 Parse.initialize("ncloudmaster");
@@ -30,7 +31,7 @@ Parse.User.become('r:ccbe063d7c91d39dc29faf51e193ffcf')
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule,GzModule,PostsModule,IonicModule.forRoot(), AppRoutingModule,HttpClientModule,BrowserAnimationsModule,PostModalModule,PostDetailModule,SearchPageModule,RecommendedPostsModule,ColloctModule],
+  imports: [BrowserModule,GzModule,PostsModule,Tab1PageModule,IonicModule.forRoot(), AppRoutingModule,HttpClientModule,BrowserAnimationsModule,PostModalModule,PostDetailModule,SearchPageModule,RecommendedPostsModule,ColloctModule],
   providers: [
      // 添加HttpClient供应器
     provideHttpClient(),

huinongbao-app/src/app/tab1/tab1.module.ts

@@ -8,6 +8,7 @@ import { RecommendedPostsModule } from './recommended-posts/recommended-posts.mo
 import { PostCategoriesModule } from './post-categories/post-categories.module';
 import { AuthorsModule } from './authors/authors.module';
 
+
 @NgModule({
   imports: [
     CommonModule,
@@ -16,7 +17,8 @@ import { AuthorsModule } from './authors/authors.module';
     Tab1RoutingModule,
     RecommendedPostsModule,
     PostCategoriesModule,
-    AuthorsModule
+    AuthorsModule,
+    
   ],
   declarations: [Tab1Page]
 })

huinongbao-app/src/app/tab1/tab1.page.html

@@ -18,6 +18,8 @@
 </ion-header>
 
 <ion-content>
+
+
   <div class="button-group">
     <div class="button-background">
       <ion-grid>

huinongbao-app/src/app/tab1/tab1.page.scss

@@ -75,4 +75,23 @@
 
 .blue-button:hover {
   background-color: #ff291e; /* 悬停时变为深蓝色 */
-}
+}
+.carousel {
+  height: 200px; /* 设置轮播图的高度 */
+}
+
+.carousel img {
+  width: 100%; /* 使图片宽度占满轮播图 */
+  height: 100%; /* 使图片高度占满轮播图 */
+  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
+}
+
+.swiper-container {
+  height: 200px; /* 设置轮播图的高度 */
+}
+
+.swiper-slide img {
+  width: 100%; /* 使图片宽度占满轮播图 */
+  height: 100%; /* 使图片高度占满轮播图 */
+  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
+}

huinongbao-app/src/app/tab1/tab1.page.ts

@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
+import { Component ,AfterViewInit} from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { PostModalComponent } from '../post-modal/post-modal.component'; // 导入对话框组件
 import { trigger, transition, style, animate } from '@angular/animations'; // 导入动画相关的模块
 import { Router } from '@angular/router';
-
+import Swiper from 'swiper';
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -21,11 +21,30 @@ import { Router } from '@angular/router';
     ])
   ]
 })
-export class Tab1Page {
+export class Tab1Page implements AfterViewInit {
   selectedTab: string = 'recommended-posts'; // 默认显示推荐帖子
 
   constructor(private modalController: ModalController, private router: Router) {}
 
+
+  ngAfterViewInit() {
+    const swiper = new Swiper('.swiper-container', {
+      // Swiper 配置
+      loop: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    });
+  }
   // 切换选中的标签
   switchTab(tab: string) {
     this.selectedTab = tab;