首页 文章

如何在离子3中结合<ion-segment>和<ion-slides>的事件？

提问于
浏览 次
3

我正在制作一个电子商务应用程序 . 在我的主页上，我按类别显示我的产品 . 我正在使用离子段和离子滑板，这样用户就可以一次滚动和选择两者 . 当我有三个类别时，它很好，所有都在家里展示，但当我增加类别时，其他类别都在屏幕后面 . 类别产品显示正常但类别名称在内部且不可见 . 我想在屏幕上滚动同时显示的类别名称和产品 . 这是我想让屏幕上的活动段可见，当该段在屏幕外时 . 提前谢谢:-)
here is the problem

<ion-content>
<ion-segment color="dark" [(ngModel)]="tabs" style="width:640px;">
    <ion-segment-button *ngFor="let i of productcategory" (click)="selectTab(i)" value="{{i.inc}}" >{{i.category_name}}</ion-segment-button>
    <div id="slide" class="slide"></div>
</ion-segment>

<ion-slides #pageSlider (ionSlideWillChange)="changeWillSlide($event)">
    <ion-slide *ngFor="let i of productcategory">

            <ion-list>
                    <div *ngFor="let pr of products; let i=index" text-wrap class="swipe-tabs">

                            <div class="swipe-tabs-1">  
                                    <img src="http://example.com/{{pr.tbl_product_image}}" />
                                    <button ion-button (click)="removefromcart(pr,i)">-</button>
                                    <button ion-button color="light" *ngIf="check">{{quan[i]}}</button>
                                    <button ion-button color="light" *ngIf="!check">0</button>
                                    <button ion-button (click)="addToCart(pr,i)">+</button>
                                </div>
                        <div class="swipe-tabs-2">
                            <h2>{{pr.tbl_product_name}} </h2>

                            <ion-list  radio-group  >
                                <ion-item *ngFor="let p of pr.pricevariant; let j=index;">
                                    <ion-label>{{p.weight}} &nbsp; &nbsp; <span class="colr-red">₹ {{p.dprice}}</span></ion-label>
                                    <ion-radio  [value]="p.weight" (ionSelect)="getdata(pr,p,i,j)" ></ion-radio>                                
                                </ion-item>
                            </ion-list>
                        </div>
                        <div class="border-hr"></div>
                    </div>

                </ion-list> 
    </ion-slide>
</ion-slides>
angular ionic-framework ionic2 event-handling ionic3

1 回答

  • 0

    我是通过在 Headers 中制作内容并在滑动期间调整一些事件来实现的： -

    <ion-header>
<ion-content #scroll scrollX="true" scrollY="true" style="height: 50px;">
    <ion-segment class="SwipedTabs-tabs">
        <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)" [ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider  && ( this.SwipedTabsSlider.getActiveIndex() === i || (  tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }'
            [ngStyle]="{'width.px': (this.tabElementWidth_px)}">
            {{tab}}
        </ion-segment-button>
    </ion-segment>
    <!-- here is our dynamic line  "indicator"-->
    <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.px': (this.tabElementWidth_px)}"></div>
</ion-content>

    <ion-slides #SwipedTabsSlider (ionSlideDrag)="animateIndicator($event)" (ionSlideWillChange)="updateIndicatorPosition()" (ionSlideDidChange)="updateIndicatorPosition()" (pan)="updateIndicatorPosition()" [pager]="false">

    在打字稿中： -

    this.tabs=["SNACKS","SWEETS","NAMKKEN","BAKERY","MISC","ETC"]; 

 selectTab(index) {
this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(100*index)+'%,0,0)';
 this.scroll.scrollTo(index*this.tabElementWidth_px,0,500);
this.SwipedTabsSlider.slideTo(index, 500);}

updateIndicatorPosition() {
this.scroll.scrollTo(this.SwipedTabsSlider.getActiveIndex()*this.tabElementWidth_px,0,200);

  // this condition is to avoid passing to incorrect index
if( this.SwipedTabsSlider.length()> this.SwipedTabsSlider.getActiveIndex())
{
  this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(this.SwipedTabsSlider.getActiveIndex() * 100)+'%,0,0)';
}
this.j=this.SwipedTabsSlider.getActiveIndex();
}

    并在CSS中：

    page-home {
.segment-ios .segment-button {
    overflow: inherit !important;
    color: #fff !important;
    padding: 0 10px;
    border-right: 1px solid white !important;
    width: auto !important;
}
.SwipedTabs-indicatorSegment {
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
    transform-origin: top 0 left 0;
    height: 1px;
    position: relative;
    top: -2px;
    background-color: white !important;
}
.SwipedTabs-tabs ion-segment-button {
    border: none !important;
    color: black!important;
    background-color: blue!important;
    display: -webkit-inline-box;
}
.SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab {
    color: white !important;
    font-size: 17px;
    font-weight: bold;
}
.SwipedTabs-tabs {
    width: fit-content !important;
    border-bottom: solid 1px #e6e6e6 !important;
}
.scroll-content {
    display: flex;
    left: -3px;
    right: 0;
    top: 3px;
}
.swiper-container {
    overflow-y: scroll !important;
}
scroll-content {
    margin-top: 35px;
    margin-bottom: -297px;
}
.SwipedTabs-tabs ion-segment-button {
    color: #fff !important;
    padding: 0 10px;
}

    }

    回复于

相关问题