Ionic4—案例（二）

空城里的往日时光

于 2019-12-18 13:38:47 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： Ionic

本文链接：https://blog.csdn.net/weixin_42472040/article/details/103596185

Ionic 专栏收录该内容

111 篇文章

订阅专栏

本文介绍如何使用Ionic框架实现九宫格布局和页面内嵌表格，包括响应式设计、固定标题行和自定义样式。通过具体代码示例，展示了布局组件的结构、样式设置及数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、九宫格布局

二、页面内嵌入表格

一、九宫格布局

<ion-content>
    <div class="img">
        业&nbsp;&nbsp;务&nbsp;&nbsp;审&nbsp;&nbsp;批
    </div>
    <ion-grid>
        <ion-row>
            <ion-col size="4" *ngFor="let item of menuList" (click)="goChild(item.router)">
                <div class="wrap">
                    <ion-badge color="danger" class="badge" *ngIf="totalList[item.id] > 0">
                        {{totalList[item.id]}}
                    </ion-badge>
                    <ion-img [src]="item.pic"></ion-img>
                    <p>{{item.title}}</p>
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

ion-content {
    .img {
        height: 18.8rem;
        line-height: 16.5rem;
        background: url(/https/llljpf.blog.csdn.net/assets/north_img/bg_sp.png) no-repeat center center/101% 100%;
        background-position-y: -.2rem;
        text-align: center;
        color: #F1F1F2;
        font-size: 2.5rem;
    }
    ion-grid {
        position: absolute;
        bottom: 0;
        top: 14.8rem;
        right: 0;
        left: 0;
        ion-row {
            ion-col {
                padding-top: 0;
                padding-bottom: 0;
                text-align: center;
                .wrap {
                    position: relative;
                    margin: 0 auto;
                    p {
                        text-align: center;
                        position: relative;
                        top: -1rem;
                        left: -.3rem;
                        font-size: 1.3rem;
                        // font-family: var(--ion-font-bold);
                        font-weight: bold;
                        color: rgba(51, 51, 51, 1);
                    }
                }
            }
        }
    }
}

@media all and (min-width: 300px) and (max-width: 340px) {
    .badge {
        position: absolute;
        top: 10%;
        right: 4%;
    }
    p {
        font-size: 1.1rem !important;
    }
}

@media all and (min-width: 340px) and (max-width: 400px) {
    .badge {
        position: absolute;
        top: 14%;
        right: 8%;
    }
}

@media all and (min-width: 400px) and (max-width: 450px) {
    .badge {
        position: absolute;
        top: 15%;
        right: 12%;
    }
}

@media all and (min-width: 470px) and (max-width: 550px) {
    .badge {
        position: absolute;
        top: 16%;
        right: 15%;
    }
    p {
        font-size: 1.5rem !important;
    }
}

@media all and (min-width: 600px) and (max-width: 900px) {
    .badge {
        position: absolute;
        top: 20%;
        right: 20%;
    }
    p {
        font-size: 2rem !important;
    }
}

@media all and (min-width: 950px) {
    .badge {
        position: absolute;
        top: 22%;
        right: 22%;
    }
    p {
        font-size: 2rem !important;
    }
}

// 待办数量
public totalList = {
    menu0: 0,
    menu1: 0,
    menu2: 0,
    menu3: 0,
    menu4: 0,
    menu5: 0,
    menu6: 0,
    menu7: 0,
    menu8: 0
};
// 九宫格数据
public menuList: any[] = [
    { id: 'menu0',  router: '', pic: '/assets/north_img/nine_1.png', title: 'xxxx'},
    { id: 'menu1',  router: '', pic: '/assets/north_img/nine_2.png', title: 'xxxx'},
    { id: 'menu2',  router: '', pic: '/assets/north_img/nine_3.png', title: 'xxxx'},
    { id: 'menu3',  router: '', pic: '/assets/north_img/nine_4.png', title: 'xxxx'},
    { id: 'menu4',  router: '', pic: '/assets/north_img/nine_5.png', title: 'xxxx'},
    { id: 'menu5',  router: '', pic: '/assets/north_img/nine_6.png', title: 'xxxx'},
    { id: 'menu6',  router: '', pic: '/assets/north_img/nine_7.png', title: 'xxxx'},
    { id: 'menu7',  router: '', pic: '/assets/north_img/nine_8.png', title: 'xxxx'},
    { id: 'menu8',  router: '', pic: '/assets/north_img/nine_9.png', title: 'xxxx'}
];

二、页面内嵌入表格

页面内嵌入表格，点击表格内部上下滑动时，标题行固定，左右滑动时，标题行跟随移动。

第一步：html模板

<ion-content>
    <div class="div-grid">
        <ul class="ul-title">
            <li class="col0">序号</li>
            <li class="col1">xxx</li>
            <li class="col2">xxxx</li>
            <li class="col3">xx</li>
            <li class="col4">xxxx</li>
        </ul>
        <div class="wrap-cont-div">
            <ul class="ul-content" *ngFor="let item of list; let i = index">
                <li class="col0">{{ i + 1}}</li>
                <li class="col1">{{item.cols1}}</li>
                <li class="col2">{{item.cols2}}</li>
                <li class="col3">{{item.cols3}}</li>
                <li class="col4">{{item.cols4}}</li>
            </ul>
        </div>
    </div>
</ion-content>

第二步：SASS样式

样式分为两类，第一类为公共的固定样式，不用修改。第二类为可自定义样式，主要用于不同场景调整表格高度、单元格最小高度和列宽。

第一类

.div-grid {
    overflow-x: auto;
    border-bottom: solid 1px #DCDCDC;
    margin-left: -1px;
    font-size: 14px;
    // 表头和内容公共样式
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        white-space: nowrap !important; // 使表头不换行
        li {
            white-space: normal !important; // 使li内文字换行
            border-left: solid 1px #DCDCDC;
            border-top: solid 1px #DCDCDC;
        }
    }
    // 第一部分：表头
    .ul-title {
        margin-bottom: -1px;
        li {
            border-bottom: solid 1px #DCDCDC;
            height: 40px; // 修改表头高度
            line-height: 40px;
            text-align: center;
            display: inline-block;
            background-color: #E6F3FC;
            color: #3D96FA;
        }
    }
    // 第二部分：内容
    .wrap-cont-div {
        overflow-y: auto;
        overflow-x: hidden;
        width: fit-content;
        max-height: calc(100vh - 40px); // 内容区域总高度减去表头高度
        .ul-content {
            display: flex;
            li {
                display: flex !important;
                padding: 5px;
                min-height: 40px; // 内容行默认高度
            }
        }
    }
    // 序号列
    .col0 {
        width: 60px;
        justify-content: center;
        align-items: center;
    }
}

第二类

// 自定义

// .wrap-cont-div {
//     max-height: calc(100vh - 40px) !important; // 内容区域总高度减去表头高度
//     li {
//         min-height: 40px !important; // 内容行高度
//     }
// }

.col1,
.col2,
.col3,
.col4 {
    width: 200px;
}

第三步：TS文件

public list = [
    {cols1: '的发货单号发士大夫活动结束访华的发货单号', cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4},
    {cols1: 1, cols2: 2, cols3: 3, cols4: 4}
];

第四步：效果图