page

src/app/tab1/tab1.page.html

@@ -14,7 +14,7 @@
 
   <!-- 导航栏 -->
   <ion-toolbar>
-    <ion-segment>
+    <ion-segment [(ngModel)]="selectedSegment">
       <ion-segment-button value="explore">
         发现
       </ion-segment-button>
@@ -22,10 +22,11 @@
         视频
       </ion-segment-button>
     </ion-segment>
+    
   </ion-toolbar>
 
   <!-- 功能模块 -->
-  <ion-segment scrollable>
+  <ion-segment scrollable [(ngModel)]="selectedSegment">
     <ion-segment-button value="case">
       <ion-icon name="albums"></ion-icon>
       案例设计
@@ -68,180 +69,252 @@
     </ion-segment-button>
   </ion-segment>
 
-  <!-- 装修锦囊块 -->
-  <ion-card>
-    <ion-card-header>
-      装修锦囊
-    </ion-card-header>
-    <ion-card-content>
-      <!-- 装修锦囊卡片 -->
-      <ion-grid>
-        <ion-row>
-          <!-- 空间设计块 -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-label>
-                  <ion-icon name="dice-outline"></ion-icon>
-                  空间设计
-                </ion-label>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <!-- 客厅怎么装card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg"></ion-img>
-                        <ion-card-header>
-                          客厅怎么装
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                    <!-- 卧室怎么装card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://bjcache.leju.com/zxjiaju/zx_pic/20141120/e6/2e/e2e6920b5532429d94ee61bd1630f9c3.jpg"></ion-img>
-                        <ion-card-header>
-                          卧室怎么装
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                  </ion-row>
-      
-                </ion-grid>
-                
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- 装前必看块 -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-label>
-                  <ion-icon name="send-outline"></ion-icon>
-                  装前必看
-                </ion-label>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <!-- 装修全流程card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://pic1.zhimg.com/v2-423645f54387fd0ea9be83687b58cc35_720w.jpg?source=172ae18b"></ion-img>
-                        <ion-card-header>
-                          装修全流程
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                    <!-- 全屋定制card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://img.zcool.cn/community/0115365dda0240a8012053c0a2c04c.jpg@1280w_1l_2o_100sh.jpg"></ion-img>
-                        <ion-card-header>
-                          全屋定制
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                  </ion-row>
-      
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- 家具家电块 -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-label>
-                  <ion-icon name="desktop-outline"></ion-icon>
-                  家具家电
-                </ion-label>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <!-- 橱柜怎么选card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://pic1.zhimg.com/v2-160f6e66e25daba826ecbef5ec4eef91_720w.jpg?source=172ae18b"></ion-img>
-                        <ion-card-header>
-                          橱柜怎么选
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                    <!-- 沙发怎么选card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://www.qszs.com/uploads/allimg/180322/6-1P322104631.jpg"></ion-img>
-                        <ion-card-header>
-                          沙发怎么选
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                  </ion-row>
-      
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <!-- 家居软装块 -->
-          <ion-col>
-            <ion-card>
-              <ion-card-header>
-                <ion-label>
-                  <ion-icon name="bed-outline"></ion-icon>
-                  家居软装
-                </ion-label>
-              </ion-card-header>
-              <ion-card-content>
-                <ion-grid>
-                  <ion-row>
-                    <!-- 窗帘怎么选card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="http://www.wzy99.com/UploadFiles/FCK/2017-10/6364376207453191332635836.jpg"></ion-img>
-                        <ion-card-header>
-                          窗帘怎么选
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                    <!-- 收纳怎么做card -->
-                    <ion-col size="12">
-                      <ion-card>
-                        <ion-img src="https://pic1.zhimg.com/v2-430eceee402f2cdf87312f13d8238d3c_r.jpg"></ion-img>
-                        <ion-card-header>
-                          收纳怎么做
-                        </ion-card-header>
-                      </ion-card>
-                    </ion-col>
-                  </ion-row>
-      
-                </ion-grid>
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          
-        </ion-row>
-      </ion-grid>
-      
-    </ion-card-content>
-  </ion-card>
-  <!-- 内容流 -->
-  <ion-list>
-    <ion-item *ngFor="let item of contentList">
-      <ion-thumbnail>
-        <img [src]="item.image">
-      </ion-thumbnail>
-      <ion-label>
-        <h2>{{item.title}}</h2>
-        <p>{{item.user}} - {{item.likes}} Likes</p>
-        <p>{{item.comments}} Comments</p>
-        <p>{{item.tags}}</p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
+  <!-- 根据selectedSegment展示不同内容 -->
+
+  <!-- 发现页 -->
+  <div *ngIf="selectedSegment === 'explore'">
+    <!-- 装修锦囊块 -->
+    <ion-card>
+      <ion-card-header>
+        装修锦囊
+      </ion-card-header>
+      <ion-card-content>
+        <!-- 装修锦囊卡片 -->
+        <ion-grid>
+          <ion-row>
+            <!-- 空间设计块 -->
+            <ion-col>
+              <ion-card>
+                <ion-card-header>
+                  <ion-label>
+                    <ion-icon name="dice-outline"></ion-icon>
+                    空间设计
+                  </ion-label>
+                </ion-card-header>
+                <ion-card-content>
+                  <ion-grid>
+                    <ion-row>
+                      <!-- 客厅怎么装card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg"></ion-img>
+                          <ion-card-header>
+                            客厅怎么装
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                      <!-- 卧室怎么装card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://bjcache.leju.com/zxjiaju/zx_pic/20141120/e6/2e/e2e6920b5532429d94ee61bd1630f9c3.jpg"></ion-img>
+                          <ion-card-header>
+                            卧室怎么装
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                    </ion-row>
+        
+                  </ion-grid>
+                  
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <!-- 装前必看块 -->
+            <ion-col>
+              <ion-card>
+                <ion-card-header>
+                  <ion-label>
+                    <ion-icon name="send-outline"></ion-icon>
+                    装前必看
+                  </ion-label>
+                </ion-card-header>
+                <ion-card-content>
+                  <ion-grid>
+                    <ion-row>
+                      <!-- 装修全流程card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://pic1.zhimg.com/v2-423645f54387fd0ea9be83687b58cc35_720w.jpg?source=172ae18b"></ion-img>
+                          <ion-card-header>
+                            装修全流程
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                      <!-- 全屋定制card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://img.zcool.cn/community/0115365dda0240a8012053c0a2c04c.jpg@1280w_1l_2o_100sh.jpg"></ion-img>
+                          <ion-card-header>
+                            全屋定制
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                    </ion-row>
+        
+                  </ion-grid>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <!-- 家具家电块 -->
+            <ion-col>
+              <ion-card>
+                <ion-card-header>
+                  <ion-label>
+                    <ion-icon name="desktop-outline"></ion-icon>
+                    家具家电
+                  </ion-label>
+                </ion-card-header>
+                <ion-card-content>
+                  <ion-grid>
+                    <ion-row>
+                      <!-- 橱柜怎么选card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://pic1.zhimg.com/v2-160f6e66e25daba826ecbef5ec4eef91_720w.jpg?source=172ae18b"></ion-img>
+                          <ion-card-header>
+                            橱柜怎么选
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                      <!-- 沙发怎么选card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://www.qszs.com/uploads/allimg/180322/6-1P322104631.jpg"></ion-img>
+                          <ion-card-header>
+                            沙发怎么选
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                    </ion-row>
+        
+                  </ion-grid>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <!-- 家居软装块 -->
+            <ion-col>
+              <ion-card>
+                <ion-card-header>
+                  <ion-label>
+                    <ion-icon name="bed-outline"></ion-icon>
+                    家居软装
+                  </ion-label>
+                </ion-card-header>
+                <ion-card-content>
+                  <ion-grid>
+                    <ion-row>
+                      <!-- 窗帘怎么选card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="http://www.wzy99.com/UploadFiles/FCK/2017-10/6364376207453191332635836.jpg"></ion-img>
+                          <ion-card-header>
+                            窗帘怎么选
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                      <!-- 收纳怎么做card -->
+                      <ion-col size="12">
+                        <ion-card>
+                          <ion-img src="https://pic1.zhimg.com/v2-430eceee402f2cdf87312f13d8238d3c_r.jpg"></ion-img>
+                          <ion-card-header>
+                            收纳怎么做
+                          </ion-card-header>
+                        </ion-card>
+                      </ion-col>
+                    </ion-row>
+        
+                  </ion-grid>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            
+          </ion-row>
+        </ion-grid>
+        
+      </ion-card-content>
+    </ion-card>
+    <!-- 内容流 -->
+    <ion-list>
+      <ion-item *ngFor="let item of contentList">
+        <ion-thumbnail>
+          <img [src]="item.image">
+        </ion-thumbnail>
+        <ion-label>
+          <h2>{{item.title}}</h2>
+          <p>{{item.user}} - {{item.likes}} Likes</p>
+          <p>{{item.comments}} Comments</p>
+          <p>{{item.tags}}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+
+  <!-- 视频页 -->
+  <div *ngIf="selectedSegment === 'video'">
+    <!-- 视频内容 -->
+    <img src="example1.jpg" alt="Example 0">
+  </div>
+
+  <!-- 案例设计页 -->
+  <div *ngIf="selectedSegment === 'case'">
+    <!-- 案例设计内容 -->
+    <img src="example2.jpg" alt="Example 1">
+  </div>
+
+  <!-- 免费设计页 -->
+  <div *ngIf="selectedSegment === 'design'">
+    <!-- 免费设计内容 -->
+    <img src="example3.jpg" alt="Example 2">
+  </div>
+
+  <!-- 装修施工页 -->
+  <div *ngIf="selectedSegment === 'decoration'">
+    <!-- 装修施工内容 -->
+    <img src="example3.jpg" alt="Example 3">
+  </div>
+
+  <!-- 软装搭配页 -->
+  <div *ngIf="selectedSegment === 'soft'">
+    <!-- 软装搭配内容 -->
+    <img src="example3.jpg" alt="Example 4">
+  </div>
+
+  <!-- 户型诊断页 -->
+  <div *ngIf="selectedSegment === 'diagnosis'">
+    <!-- 户型诊断内容 -->
+    <img src="example3.jpg" alt="Example 5">
+  </div>
+
+  <!-- 全屋定制页 -->
+  <div *ngIf="selectedSegment === 'customization'">
+    <!-- 全屋定制内容 -->
+    <img src="example3.jpg" alt="Example 6">
+  </div>
+
+  <!-- 干货百科页 -->
+  <div *ngIf="selectedSegment === 'encyclopedia'">
+    <!-- 干货百科内容 -->
+    <img src="example3.jpg" alt="Example 7">
+  </div>
+
+  <!-- 风格测试页 -->
+  <div *ngIf="selectedSegment === 'style'">
+    <!-- 风格测试内容 -->
+    <img src="example3.jpg" alt="Example 8">
+  </div>
+
+  <!-- 设计我家页 -->
+  <div *ngIf="selectedSegment === 'home'">
+    <!-- 设计我家内容 -->
+    <img src="example3.jpg" alt="Example 9">
+  </div>
+
+  <!-- 智能预算页 -->
+  <div *ngIf="selectedSegment === 'budget'">
+    <!-- 智能预算内容 -->
+    <img src=".jpg" alt="Example 10">
+  </div>
+
   
 </ion-content>
 

src/app/tab1/tab1.page.ts

@@ -6,18 +6,14 @@ import { Component } from '@angular/core';
   styleUrls: ['tab1.page.scss']
 })
 export class Tab1Page {
-  selectedSegment: string = 'company';
 
-  activeTab:string = 'explore';
-  changeTab(event:any){
-    this.activeTab = event.detail.value
-  }
+  selectedSegment: string = 'explore';
 
   constructor() {}
 
-  // segmentChanged(event: CustomEvent) {
-  //   this.selectedSegment = event.detail.value;
-  // }
+  segmentChanged(event: CustomEvent) {
+    this.selectedSegment = event.detail.value;
+  }
 
   // 在此处定义和初始化数据
   contentList = [
@@ -27,4 +23,9 @@ export class Tab1Page {
   ];
   
 
+
+
+
 }
+
+