ionic4.x仿京东 - 2.1.首页--导航栏、轮播图、猜你喜欢、商品列表

最新推荐文章于 2021-04-07 13:08:08 发布

ZYYzyy1993

最新推荐文章于 2021-04-07 13:08:08 发布

阅读量415

点赞数

分类专栏： ionic

本文链接：https://blog.csdn.net/ZYYzyy1993/article/details/108295697

版权

ionic 专栏收录该内容

62 篇文章 5 订阅 ¥59.90 ¥99.00

订阅专栏

本文档详细介绍了如何使用Ionic4.x框架构建京东风格的页面，包括设置公共样式，添加第三方图标，创建导航栏并实现消息提示，配置轮播图功能，以及实现猜你喜欢和商品列表的布局。涉及到的关键技术有 Ionic 组件的使用、轮播图的Swiper API、动态计算栅格宽度等。

摘要由CSDN通过智能技术生成

一、准备

1.定义公共样式

【src/global.scss】

body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;   //10px   浏览器的默认字体大小是16px
}

.clearfix{
    &::after{
      display: block;
      content: "";
      height: 0px;
      clear: both;
    }
}

2.图标

（1）图标库

a. ionic官方图标：https://ionicons.com/

b. 第三方图标：阿里巴巴图标库

了解本专栏