ion-segament控件可以通过代码调用click事件

最新推荐文章于 2024-04-22 23:18:29 发布
最新推荐文章于 2024-04-22 23:18:29 发布
阅读量2.4k 收藏 1
点赞数 3
分类专栏： 生活经验 文章标签： typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012381782/article/details/110728558
版权

前提：

entrypage.html主容器的header 配置segament用于tab切换，主容器里面的content嵌套了好几个tab,然后这个tab里面有子组件。需要通过代码调用segament的点击事件。

<ion-header *ngIf="titleBar && titleBar!=={} "
    [ngClass]="{'isHeight': !isHeader, 'header-orange': titleBar.cssStyle === 'orange','header-white': titleBar.cssStyle === 'white'}"
    translucent="false">
    <ion-toolbar id="superToolbar"
        [ngClass]="{'isShow': isHeader,'isHide':!isHeader,'bg-image':showWaterImg, 'title-orange': titleBar.cssStyle === 'orange','title-transparent': titleBar.cssStyle === 'transparent','title-white': titleBar.cssStyle === 'white','bottom-line': (titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ) && titleBar.bottomLine !== false }">
        <ng-container *ngIf="titleBar.title &&  (!titleBar.title.layout || titleBar.title.layout === 'center')">
            <ion-title class="nav-title" *ngIf="titleBar.title">{{titleBar.title.labelName}}</ion-title>
        </ng-container>
        <ng-container *ngIf="titleBar.title && titleBar.title.layout === 'left'">
            <ion-buttons slot="start" class="start" class="nav-title nav-title-left">
                {{titleBar.title.labelName}}
            </ion-buttons>

        </ng-container>
        <ion-buttons class="nav-title nav-position" style="height: 2.75rem;" *ngIf="titleBar.position" slot="start"
            class="start" (click)="buttonClick(titleBar.position.link)">
            <span id="identityCityName" *ngIf="positionInfo &&  positionInfo.name">{{positionInfo.name}} </span>
            <i class="triangle-icon"></i>
        </ion-buttons>


        <!-- search box -->
        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
            <div (click)="searchButtonClick(titleBar.searchInput,$event)">
                <ion-searchbar class="search-bar" *ngIf="titleBar.searchInput"
                    placeholder={{titleBar.searchInput.placeholder}} value={{titleBar.searchInput.value}} mode="ios">
                </ion-searchbar>
            </div>

            <!-- <img class="header-icon-img" src="../../../assets/img/nav_search.png" alt="search"> -->
        </ng-container>
        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
            <div (click)="searchButtonClick(titleBar.searchInput)">
                <ion-searchbar class="search-bar search-bar-orange" *ngIf="titleBar.searchInput"
                    placeholder={{titleBar.searchInput.placeholder}} mode="ios"></ion-searchbar>
            </div>

            <!-- <img class="header-icon-img" src="../../../assets/img/nav_search_white@3x.png" alt="search"> -->
        </ng-container>



        <!-- search btn -->
        <ng-container *ngIf="titleBar.searchButton">
            <ng-container *ngIf="titleBar.searchButton.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="searchButtonClick(titleBar.searchButton)">
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/img/nav_search.png" alt="search">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/img/nav_search_white@3x.png" alt="search">
                    </ng-container>
                    <span
                        [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.searchButton.labelName}}</span>
                </ion-buttons>
            </ng-container>

            <ng-container *ngIf="titleBar.searchButton.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="searchButtonClick(titleBar.searchButton)">
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img-r" src="../../../assets/img/nav_search.png" alt="search">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img-r" src="../../../assets/img/nav_search_white@3x.png" alt="search">
                    </ng-container>
                    <span
                        [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.searchButton.labelName}}</span>
                </ion-buttons>
            </ng-container>
        </ng-container>

        <ng-container *ngIf="titleBar.back">
            <ng-container *ngIf="titleBar.back.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="back()">
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" style="margin-right: 0px;" src="../../../assets/img/back.png"
                            alt="back">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/img/nav_icon_back_white@3x.png" alt="back">
                    </ng-container>
                </ion-buttons>
            </ng-container>

            <ng-container *ngIf="titleBar.back.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="back()">
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img-r" src="../../../assets/img/back.png" alt="back">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img-r" src="../../../assets/img/nav_icon_back_white@3x.png" alt="back">
                    </ng-container>
                </ion-buttons>
            </ng-container>
        </ng-container>


        <!-- add  call btn : -->
        <ng-container *ngIf="titleBar.call">
            <ng-container *ngIf="titleBar.call.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="call(titleBar.call)">
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/nav_icon_tel@3x.png" alt="call">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/nav_icon_tel_white@3x.png" alt="call">
                    </ng-container>
                </ion-buttons>
            </ng-container>

            <ng-container *ngIf="titleBar.call.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="call(titleBar.call)">
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_tel@3x.png" alt="call">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_tel_white@3x.png" alt="call">
                    </ng-container>
                </ion-buttons>
            </ng-container>
        </ng-container>

        <!-- add  chat btn : -->
        <ng-container *ngIf="titleBar.chat">
            <ng-container *ngIf="titleBar.chat.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="chat(titleBar.chat)">
                    <img class="header-icon-img" src="../../../assets/icon/{{titleBar.chat.icon}}" alt="chat">
                    <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/details_icon_chat@3x.png" alt="chat">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/details_icon_chat_w@3x.png" alt="chat">
                    </ng-container> -->
                </ion-buttons>
            </ng-container>

            <ng-container *ngIf="titleBar.chat.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="chat(titleBar.chat)">
                    <img class="header-icon-img-r" src="../../../assets/icon/{{titleBar.chat.icon}}" alt="chat">
                    <!-- 
                    <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/details_icon_chat@3x.png" alt="chat">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/details_icon_chat_w@3x.png" alt="chat">
                    </ng-container> -->
                </ion-buttons>
            </ng-container>
        </ng-container>

        <!-- add  more btn : -->
        <ng-container *ngIf="titleBar.moreLine">
            <ng-container *ngIf="titleBar.moreLine.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="moreLine(titleBar.moreLine)">
                    <img class="header-icon-img" src="../../../assets/icon/{{titleBar.moreLine.icon}}" alt="moreLine">

                    <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/nav_icon_more@3x.png" alt="moreLine">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/nav_icon_more_w@3x.png" alt="moreLine">
                    </ng-container> -->
                </ion-buttons>
            </ng-container>

            <ng-container *ngIf="titleBar.moreLine.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="moreLine(titleBar.moreLine)">
                    <img class="header-icon-img-r" src="../../../assets/icon/{{titleBar.moreLine.icon}}" alt="moreLine">
                    <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/nav_icon_more@3x.png" alt="moreLine">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/nav_icon_more_w@3x.png" alt="moreLine">
                    </ng-container> -->
                </ion-buttons>
            </ng-container>
        </ng-container>

        <!-- add  filter btn : -->
        <ng-container *ngIf="titleBar.filter">
            <ng-container *ngIf="titleBar.filter.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="filter(titleBar.filter)">
                    <img class="header-icon-img" src="../../../assets/img/{{titleBar.filter.icon}}" alt="chat">

                    <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="filter">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="filter">
                    </ng-container> -->
                </ion-buttons>
            </ng-container>

            <ng-container *ngIf="titleBar.filter.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="filter(titleBar.filter)">
                    <img class="header-icon-img-r" src="../../../assets/img/{{titleBar.filter.icon}}" alt="chat">

                    <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                        <img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="filter">
                    </ng-container>
                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                        <img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="filter">
                    </ng-container> -->
                </ion-buttons>
            </ng-container>
        </ng-container>

        <!-- textButton 确定 提价表单用的  -->
        <ng-container *ngIf="titleBar.textButton">
            <ng-container *ngIf="titleBar.textButton.layout==='left'">
                <ion-buttons slot="start" class="start titleBar-right-box" (click)="textButton(titleBar.textButton)">
                    <span class="titleBar-textBtn">{{titleBar.textButton.label}}</span>
                </ion-buttons>
            </ng-container>
            <ng-container *ngIf="titleBar.textButton.layout==='right'">
                <ion-buttons slot="end" class="end titleBar-right-box" (click)="textButton(titleBar.textButton)">
                    <span class="titleBar-textBtn">{{titleBar.textButton.label}}</span>
                </ion-buttons>
            </ng-container>
        </ng-container>

        <!-- iconButton 数组形式最终可能是用这个替代所以的图标 btn -->
        <ng-container *ngIf="titleBar.iconButton && titleBar.iconButton.length">
            <ng-container *ngFor="let item of titleBar.iconButton">
                <ng-container *ngIf="item.layout==='left'">
                    <ion-buttons slot="start" class="start" (click)="iconButtonClick(item)">
                        <img class="header-icon-img" src="../../../assets/icon/{{item.icon}}" alt="iconButton">
                        <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                                        <img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="iconButton">
                                    </ng-container>
                                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                                        <img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="iconButton">
                                    </ng-container> -->
                    </ion-buttons>
                </ng-container>

                <ng-container *ngIf="item.layout==='right'">
                    <ion-buttons slot="end" class="end" (click)="iconButtonClick(item)">
                        <img class="header-icon-img-r" src="../../../assets/icon/{{item.icon}}" alt="iconButton">
                        <!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                                        <img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="iconButton">
                                    </ng-container>
                                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                                        <img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="iconButton">
                                    </ng-container> -->
                    </ion-buttons>
                </ng-container>
            </ng-container>
        </ng-container>

        <!-- toggleButton -->

        <ng-container *ngIf="titleBar.toggleButton && titleBar.toggleButton.length === 2">
            <ion-title>
                <div style="padding-top: 0.13rem;">

                    <div class="nav-toggle-bg">
                        <div class="toggle-left" [ngClass]="{'toggle-check': titleBar.toggleButton[0].checked}"
                            (click)="toggle(titleBar.toggleButton, 0)">{{titleBar.toggleButton[0].label}}</div>
                        <div class="toggle-right" [ngClass]="{'toggle-check': titleBar.toggleButton[1].checked}"
                            (click)="toggle(titleBar.toggleButton, 1)">{{titleBar.toggleButton[1].label}}
                            <div *ngIf="titleBar.hasNew && titleBar.hasNew !== '0' " class="toggle-right-new"></div>
                        </div>
                    </div>
                </div>

            </ion-title>
            <!-- todo: -->
            <!-- <ng-container *ngIf="titleBar.textButton.layout==='right'">
                        <ion-buttons slot="end" class="end" (click)="textButton(titleBar.textButton)">
                            <span [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.textButton.label}}</span>
                        </ion-buttons>
                    </ng-container> -->
        </ng-container>
        <ng-container *ngIf="appTypeCustom==='LJ'">
            <!-- add  favorite btn-->
            <ng-container *ngIf="titleBar.favorite">
                <ng-container *ngIf="titleBar.favorite.layout==='left'">
                    <ion-buttons slot="start" class="start" (click)="favorite(titleBar.favorite.submit)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img"
                                    src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img"
                                    src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
                            <img class="header-icon-img" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
                                alt="favorite">
                        </ng-container>
                    </ion-buttons>
                </ng-container>

                <ng-container *ngIf=" titleBar.favorite.layout==='right'">
                    <ion-buttons slot="end" class="end" (click)="favorite(titleBar.favorite.submit)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img-r"
                                    src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img-r"
                                    src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
                            <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
                                alt="favorite">
                        </ng-container>
                    </ion-buttons>
                </ng-container>
            </ng-container>
            <!-- add  share btn-->
            <ng-container *ngIf="titleBar.share">
                <ng-container *ngIf="titleBar.share.layout==='left'">
                    <ion-buttons slot="start" class="start" (click)="share(titleBar.share.link)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <img class="header-icon-img" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <img class="header-icon-img" src="../../../assets/icon/nav_icon_share_white@3x.png"
                                alt="share">
                        </ng-container>
                    </ion-buttons>
                </ng-container>

                <ng-container *ngIf="titleBar.share.layout==='right'">
                    <ion-buttons slot="end" class="end" (click)="share(titleBar.share.link)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share_white@3x.png"
                                alt="share">
                        </ng-container>
                    </ion-buttons>
                </ng-container>
            </ng-container>
        </ng-container>

        <ng-container *ngIf="appTypeCustom!='LJ'">
            <!-- add  share btn-->
            <ng-container *ngIf="titleBar.share">
                <ng-container *ngIf="titleBar.share.layout==='left'">
                    <ion-buttons slot="start" class="start" (click)="share(titleBar.share.link)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <img class="header-icon-img" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <img class="header-icon-img" src="../../../assets/icon/nav_icon_share_white@3x.png"
                                alt="share">
                        </ng-container>
                    </ion-buttons>
                </ng-container>

                <ng-container *ngIf="titleBar.share.layout==='right'">
                    <ion-buttons slot="end" class="end" (click)="share(titleBar.share.link)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share_white@3x.png"
                                alt="share">
                        </ng-container>
                    </ion-buttons>
                </ng-container>
            </ng-container>

            <!-- add  favorite btn-->
            <ng-container *ngIf="titleBar.favorite">
                <ng-container *ngIf="titleBar.favorite.layout==='left'">
                    <ion-buttons slot="start" class="start" (click)="favorite(titleBar.favorite.submit)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img"
                                    src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img"
                                    src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
                            <img class="header-icon-img" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
                                alt="favorite">
                        </ng-container>
                    </ion-buttons>
                </ng-container>

                <ng-container *ngIf=" titleBar.favorite.layout==='right'">
                    <ion-buttons slot="end" class="end" (click)="favorite(titleBar.favorite.submit)">
                        <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img-r"
                                    src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
                                <img class="header-icon-img-r"
                                    src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
                            <img class="header-icon-img-r" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
                                alt="favorite">
                        </ng-container>
                    </ion-buttons>
                </ng-container>
            </ng-container>
        </ng-container>


        <ng-container *ngIf="titleBar.cancel">
            <ng-container *ngIf="titleBar.cancel.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="back()">
                    <span
                        [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
                </ion-buttons>
            </ng-container>
            <ng-container *ngIf="titleBar.cancel.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="back()">
                    <span
                        [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
                </ion-buttons>
            </ng-container>
        </ng-container>

        <ng-container *ngIf="titleBar.close">
            <ng-container *ngIf="titleBar.close.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="close()">
                    <img class="header-icon-img" src="../../../assets/img/close.png" alt="back">
                </ion-buttons>
            </ng-container>
            <ng-container *ngIf="titleBar.close.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="close()">
                    <img class="header-icon-img-r" src="../../../assets/img/close.png" alt="back">
                </ion-buttons>
            </ng-container>
        </ng-container>

        <ng-container *ngIf="titleBar.discounts">
            <ng-container *ngIf="titleBar.discounts.layout==='left'">
                <ion-buttons slot="start" class="start" (click)="buttonClick(titleBar.discounts.link)">
                    <img class="header-icon-img" src="../../../assets/img/activity@3x.png" alt="discounts">
                </ion-buttons>
            </ng-container>
            <ng-container *ngIf="titleBar.discounts.layout==='right'">
                <ion-buttons slot="end" class="end" (click)="buttonClick(titleBar.discounts.link)">
                    <img class="header-icon-img-r" src="../../../assets/img/activity@3x.png" alt="discounts">
                </ion-buttons>
            </ng-container>
        </ng-container>
    </ion-toolbar>
    <ion-toolbar *ngIf="showTopTab" style="--padding-bottom:0px;padding-left: 0px;padding-right: 0px;" id="homeTopTab">
        <!-- <ul class="ulTopTab">
            <li *ngFor="let item of tagData.data;let i=index;" id="homeNavTab{{i}}"
                [ngClass]="{'active': tagData.currentTab === item.indexTab}" [ngStyle]="{'width': aWidth}"
                (click)="change(item,item.indexTab)">
                <span>{{item.label}}</span>
            </li>
        </ul> -->
        <div id="HometopSegment">
            <ion-segment #segment (ionChange)="segmentChanged($event)" [(ngModel)]="selectedSegment"
                [scrollable]="true">
                <ion-segment-button id="hometopSegmentBtn{{i}}" *ngFor="let item of tagData.data;let i=index;" [value]="i">
                    <span>{{item.label}}</span>
                    <div class="bar"></div>
                </ion-segment-button>
            </ion-segment>
        </div>
        <hr style="width: 100%;height: 0.04rem;background-color: #EBEBED;">
    </ion-toolbar>

通过子组件页面的声明周期监听处理点击事件：

  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewChecked(): void {
    let currentTabStr = 'hometopSegmentBtn';
    if (this.tagData && this.tagData.currentTab) {
      currentTabStr += this.tagData.currentTab;
    } else {
      currentTabStr += '0';
    }
    if (document.getElementById(currentTabStr)) {
      const firstBtn = document.getElementById(currentTabStr);
      firstBtn.click();
    }
  }

如果有更好的办法请留言，谢谢。

AndrewWen099
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
仿写哔哩哔哩的头部导航部分（HTML+CSS静态）
qq_44723773的博客
10-21 7077
介绍 先来看看哔哩哔哩的头部导航部分效果，B站的头部导航背景图片使用的是动态叠加（变形和动画的效果），我们可以采用静态的图片的方式来实现背景图的部分 效果 来看看我的实现效果，是不是可以非常棒？ 代码 关于代码部分不解释，在此处我会将该代码上传，链接并附在此处，有需要的小伙伴可以下载下来自行学习和体验！ <!-- * @Author: OriginalCoder * @Date: 2020-10-21 17:46:04 * @version: * @LastEditTime: 2020-
指针 段错误 segament fault
undead的专栏
05-26 632
列，例程序： #include int main(int argc,char ** argv){char * p ;//p = '/0';//p = "abcdefg"; //*p = "abcdefg"[5];//segament fault //段错误 *p = "abcdefg";//segament fault //段错误//p = &("abcdefg" [5]);printf("%s/n",p); return 0;} 段错误的，两行，是因为指针变量p，是野指针
ionic我的收藏可以滑动的嵌套segament
u012381782的博客
12-07 152
顶部住房，商铺 用segament控件，里面又嵌套了一层
ionic2中ion-segment用法
涂涂
08-17 9289
segment是一组按钮，有时称为分段控件，允许用户与许多控件的紧凑组进行交互。 分段提供与标签相似的功能，选择一个将取消选择所有其他选项。 当您希望让用户在应用程序的不同页面之间来回移动时，应使用选项卡栏而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。效果看图看代码：&lt;!-- Segment 在头部使用 --&gt; &lt;ion-header...
Android自定义Tab选项卡4行代码完成调用（Fragment+ViewPager组合）
生命欣欣向荣，唯奋斗不息！
11-08 2672
一、前言      恰逢周末刚好可以抽点时间整理项目中的自定义控件。这个星期打算先从tab选项卡入手，将以前用到的Fragment，ViewPager，ImageView，TextView，RelattiveLayout等控件组合起来，形成一个TabView的java类，暴露需要设置方法方便日后能够快速的调用。顺便分享出来，一起学习。 最终的效果图
ion-java-1.0.2-API文档-中英对照版.zip
05-04
赠送源代码：ion-java-1.0.2-sources.jar； 赠送Maven依赖信息文件：ion-java-1.0.2.pom； 包含翻译后的API文档：ion-java-1.0.2-javadoc-API文档-中文(简体)-英语-对照版.zip； Maven坐标：software.amazon.ion:ion...
ion-java-1.0.2-API文档-中文版.zip
03-30
赠送源代码：ion-java-1.0.2-sources.jar 包含翻译后的API文档：ion-java-1.0.2-javadoc-API文档-中文(简体)版.zip 对应Maven信息：groupId：software.amazon.ion，artifactId：ion-java，version：1.0.2 使用方法...
ion-sfu:Pure Go WebRTC SFU
03-11
可以直接调用它，也可以通过或接口调用它。 特征 音频/视频/数据通道转发 拥塞控制（TWCC，REMB，RR / SR） 统一计划语义 发布/订阅对等连接（ O(n)端口使用情况） 音频电平指示（RFC6464）。 “ X在说话” 快速...
cesium-ion-rest-api-examples:使用铯离子 REST API 的代码示例
07-24
Cesium 是一个快速、简单、端到端的平台，用于平铺、可视化和... 此存储库包含用于使用 Cesium ion REST API 的示例代码。 如果您是 Cesium 的新手，请查看。 有一个问题？ 在是从 Cesium 团队获得答案的最快方式。
ion-sdk-react
05-30
Alpha 质量警告 ...BroadcastContext：提供对ion-sdk-js LocalStream的访问以进行广播 可重复使用的离子组件src/components/ <IonProvider> ：将您的组件包装在 IonProvider 中以启用useIon()钩子 ...
Ionic基础——ion-tap选项卡及路由结合ion-tap详解
bboyjoe的博客
02-16 1万+
一.选项卡 : ion-tabs简单介绍 使用ion-tabs指令声明选项卡，使用ion-tab声明选项页：  ... ... ... 每个ion-tab元素的title属性值将作为选项页的标题其 内容将填充选项卡书签栏之外的剩余区域（被应用.pane样式）。 注意： 1. 不要把ion-tabs指令放在ion-content之内 2. ion-tab的内容应当放入ion-vie
项目总结关于ionic3中的ion-segment的总结
时清云的博客
05-30 4418
目前做的项目是ionic3和angular4.0的结合，所以用到了很多关于ionic3中封装好的标签，例如具有轮播效果的ion-slides和ion-slide等。那么这次就要总结一下另外一个标签ion-segment的用法了。 ion-segment这个标签以前用的很少，几乎没有用过。它主要是一组按钮，有时称为分段控件，之前都是用button按钮，现在知道了，开始用ion-segment，因为它...
微信小程序——仿盒马鲜生APP
weixin_33972649的博客
12-11 1763
前段时间，随着马化腾现身全国多地用微信小程序乘坐公交的新闻出现，微信小程序的热度可谓是更上了一层。微信小程序现身至今，因其不用下载就可使用的方便等优点，发展趋势一直良好。盒马鲜生的问世也是充满了热度，实现了快速配送，可谓是阿里巴巴对线下超市完全重构的新零售业态。两个都这么方便的东西碰撞到一起，会发生什么呢？最近正好在学习微信小程序，于是仿...
ION基本概念介绍和原理分析
热门推荐
zirconsdu的专栏
05-24 3万+
转载前的话： ION将内核态形形色色的内存分配纳入统一的管理接口之中，更重要的设计意图是为内存在不同用户态进程之间传递和访问提供了支持。 每个ion_buffer与一个struct file关联，其handle纳入进程file desc空间而不是/dev/ion设备内单独的handle空间，方便之处如下： 每个buffer一个handle，便于更灵活地细粒度地控制每个buffer的使用周期；
Ionic4—UI组件之ion-card组件
雷雨天的雷胖子
01-09 864
目录 一、概述 二、ion-card组件 三、ion-card-content组件 四、ion-card-header组件 五、ion-card-subtitle组件 六、ion-card-title组件 七、实例 一、概述 卡片组件是一种标准的用户界面，通常由一些标题、副标题和内容组成。如下为测试用例的页面代码。 <!DOCTYPE html> <html...
《前端面试题》- TypeScript - TypeScript的优/缺点
小张微说的博客
04-22 5184
问题 简述TypeScript的优/缺点 答案 优点 增强了代码的可读性和可维护性 包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的 社区活跃，完全支持es6 缺点 增加学习成本 增加开发成本，因为增加了类型定义 需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
05-06
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
eNSP软件安装及拓扑结构搭建.docx
最新发布
05-06
、eNSP的安装 1．安装eNSP之前必须先安装以下三个插件： VirtualBox WinPcap Wireshack eNSP作为模拟器主体，需要对应版本的VirtualBox和WinPcap提供虚拟环境，Wireshack用于实验当中测试抓取数据包使用。 安装好这三个插件，只需要点下一步选择好对应的安装位置即可，然后就可以安装eNSP软件了。 eNSP的页面
vmware虚拟机安装教程
05-06
附件是vmware虚拟机安装教程，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
ionic侧边栏 ion-side-menus 以及 ion-tap结合侧边 栏详解
05-30
Ionic侧边栏是一个非常实用的组件，可以让用户轻松地在不同的页面之间进行导航。...总之，使用ion-side-menus和ion-tap指令可以轻松创建具有侧边栏导航的Ionic应用，并实现侧边栏中项目的点击事件处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值