全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

Ionic实现可以横向滑动的产品卡片

2021年2月24日 536点热度 0人点赞 0条评论

在移动端的项目里面,比如商城项目,大都有可以横向滑动的产品卡片,在Ionic里面,我们可以使用纯html加css来实现这样的功能。

 

操作步骤

我就直接上代码吧,代码拿过去一看就懂了,相比之前老师教我的用ul,li的方式还要去计算列表的宽度,简单多了。

 

html代码:

<ion-header>
  <ion-toolbar>
    <ion-title>product-list</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h5>产品列表</h5>
  <div class="product_list">
    <div class="content" *ngFor="let item of productList">
      <img src={{item.picUrl}}>
    </div>
  </div>
</ion-content>

 

css代码:

h5{
    margin-left: 2%;
}
.product_list{
    width: 96%;
    margin: 0 auto;
    margin-top: 10px;
    white-space: nowrap;
    overflow-x: scroll;
    .content{
        display: inline-block;
        width: 30%;
        margin-right: 3%;
    }
}

 

ts代码:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.page.html',
  styleUrls: ['./product-list.page.scss'],
})
export class ProductListPage implements OnInit {
  productList = [{id: 0, name: '茶杯0', picUrl: '../../assets/pic1.png'},
                 {id: 1, name: '茶杯1', picUrl: '../../assets/pic2.png'},
                 {id: 2, name: '茶杯2', picUrl: '../../assets/pic3.png'},
                 {id: 3, name: '茶杯3', picUrl: '../../assets/pic4.png'}];

  constructor() { }

  ngOnInit() {
  }

}

图片自己随便找几张就可以了,这里就不放资源了。很简单的用css就能实现的,没必要搞得太复杂。

 

效果展示:

效果图片1效果图片2

 

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小技巧
最后更新:2021年2月24日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号