angular新闻列表分页

说明:使用angular技术,material控件,ngfor循环,img网络图片展示,分页组件

效果图:

step1: C:\Users\Administrator\WebstormProjects\untitled4\src\app\home\home.component.ts

javascript 复制代码
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import {MatListModule} from '@angular/material/list';
import {NgForOf, SlicePipe} from '@angular/common';
import {MatPaginator} from '@angular/material/paginator';

// 定义列表项的数据结构
interface ListItem {
  id: number;
  title: string;
  description: string;
  avatarUrl: string;
}


@Component({
  selector: 'app-home',
  imports: [MatListModule, NgForOf, MatPaginator, SlicePipe],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent implements AfterViewInit {
  // 列表项数据数组
  listItems: ListItem[] = [
    {
      id: 1,
      title: 'Item 1',
      description: 'Item 1 description goes here',
      avatarUrl: 'https://randomuser.me/api/portraits/men/1.jpg'
    },
    {
      id: 2,
      title: 'Item 2',
      description: 'Item 2 description goes here',
      avatarUrl: 'https://randomuser.me/api/portraits/men/2.jpg'
    },
    {
      id: 3,
      title: 'Item 3',
      description: 'Item 3 description goes here',
      avatarUrl: 'https://randomuser.me/api/portraits/men/3.jpg'
    },
    {
      id: 4,
      title: 'Item 4',
      description: 'Item 4 description goes here',
      avatarUrl: 'https://randomuser.me/api/portraits/men/4.jpg'
    },
    {
      id: 5,
      title: 'Item 5',
      description: 'Item 5 description goes here',
      avatarUrl: 'https://randomuser.me/api/portraits/men/5.jpg'
    },
    {
      id: 6,
      title: 'Item 6',
      description: 'Item 6 description goes here',
      avatarUrl: 'https://randomuser.me/api/portraits/men/6.jpg'
    }
  ];

  // 分页相关变量
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  pageSize = 2; // 每页显示的条数
  currentPage = 0; // 当前页码

  constructor() { }

  // 处理点击事件
  handleClick(event: Event, itemId: number): void {
    console.log(`Clicked on item ${itemId}`);
    // 在这里可以添加其他逻辑,比如导航到详情页面
  }

  ngAfterViewInit(): void {
    // 将数据源连接到分页器
    this.paginator.length = this.listItems.length;
    this.paginator.pageSize = this.pageSize;
  }

  // 处理分页事件
  handlePageEvent(event: any): void {
    this.pageSize = event.pageSize;
    this.currentPage = event.pageIndex;
    console.log(`Page size: ${this.pageSize}, Page index: ${this.currentPage}`);
  }
}

step2: C:\Users\Administrator\WebstormProjects\untitled4\src\app\home\home.component.html

xml 复制代码
<mat-list role="list">
  <mat-list-item role="listitem" *ngFor="let item of listItems | slice: currentPage * pageSize : (currentPage + 1) * pageSize">
    <div class="item-container" (click)="handleClick($event, item.id)">
      <img
        [src]="item.avatarUrl"
        [alt]="item.title"
        class="item-avatar"
      />
      <div class="item-content">
        <h3 class="item-title">{{ item.title }}</h3>
        <p class="item-description">{{ item.description }}</p>
      </div>
    </div>
  </mat-list-item>
</mat-list>

<!-- 分页组件 -->
<mat-paginator
  [pageSize]="pageSize"
  [pageSizeOptions]="[2, 4, 6]"
  (page)="handlePageEvent($event)"
  [length]="listItems.length"
  [hidePageSize]="false"
  showFirstLastButtons="true">
</mat-paginator>

step3: C:\Users\Administrator\WebstormProjects\untitled4\src\app\home\home.component.css

css 复制代码
/* 在你的 CSS 文件中添加以下样式 */
.custom-list {
  background-color: #f8f9fa; /* 列表背景色 */
  padding: 20px; /* 列表的内边距 */
}

.list-item {
  background-color: #ffffff; /* 列表项背景色 */
  margin-bottom: 10px; /* 列表项之间的间距 */
  border-radius: 8px; /* 列表项的圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
  transition: transform 0.3s ease; /* 添加悬停动画 */
}

.list-item:hover {
  transform: translateX(5px); /* 悬停时向右移动5px */
  box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* 悬停时增加阴影 */
}

.item-container {
  padding: 15px; /* 内容的内边距 */
  display: flex;
  align-items: center; /* 垂直居中 */
}

.item-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e0e0e0;
  object-fit: cover;
  margin-right: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.item-avatar:hover {
  transform: scale(1.05);
}


.item-content {
  flex: 1; /* 文本内容占满剩余空间 */
}

.item-title {
  color: #2c3e50; /* 标题颜色 */
  margin: 0; /* 移除标题的默认外边距 */
  font-size: 18px; /* 标题字体大小 */
  font-weight: 600; /* 标题加粗 */
}

.item-description {
  color: #7f8c8d; /* 描述文字颜色 */
  margin: 5px 0 0 0; /* 描述文字的外边距 */
  font-size: 14px; /* 描述文字大小 */
  line-height: 1.5; /* 行高 */
}

end

相关推荐
爱吃的强哥11 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信19 分钟前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
谈不譚网安20 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板25 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩26 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真32 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.2 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端