离子3上的离子滑动误差

时间:2018-06-22 17:37:08

标签: ionic-framework

在离子3上使用离子滑动装置时遇到问题。

enter image description here

它使用了我所有的屏幕尺寸,但是当我向下滚动时,我的脚掌都可以了,还可以,但是我需要这些幻灯片要小一些 enter image description here

这是我的代码:

<ion-header>
  <ion-navbar>
    <ion-title>
      Productos
    </ion-title>
    <ion-buttons end>
      <button (click)="reloadProducts()" style="background:none" ion-button round full large text-center icon-right> <!--(click)="imeiViewer()"-->
        <ion-icon name="cart"></ion-icon>
        <ion-badge *ngIf="itemInfoHeader.length > 0" id="cart-badge">{{itemInfoHeader.length}}</ion-badge>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-slides pager>
         <ion-slide style="width:100%; height: 50%; "  *ngFor="let slide of slide_items" >
            <div>
               <img  src="assets/img/{{slide}}.png"> 
            </div>
         </ion-slide >      
    </ion-slides>
          <ion-grid>
            <ion-row>
              <ion-col col-6>
                <button ion-button block icon-start>Filtrar
                    <ion-icon  name="options"></ion-icon>
                </button>
               </ion-col>
               <ion-col col-6>
                <button ion-button  block icon-end>Ordenar
                    <ion-icon name="reorder"></ion-icon>
                </button>
              </ion-col>
            </ion-row>
          </ion-grid>
          <ion-col col-6 col-md-4 col-xl-3 *ngFor="let producto of itemInfo">
            <ion-item class="item-thumbnail-left" >
                <ion-grid>
                    <ion-row>
                      <ion-col col-6>
                        <img  src="http://186.176.206.154:8088/images/Products/{{producto.ItemId}}_l_.PNG"  >
                      </ion-col>
                      <ion-col col-6>
                        <h3>{{producto.ItemId}}</h3>
                        <ion-item class="item item-text-wrap">{{producto.ItemName}}</ion-item>
                        <p style="position:absolute;right:10px;">
                          <button ion-button (click)="addToCart(producto)" icon-end >
                            <ion-icon name="cart"></ion-icon>  
                          </button> 
                        </p>
                      </ion-col>
                    </ion-row>
                  </ion-grid>
                    </ion-item>
          </ion-col>
</ion-content>

如果有人知道如何使我的幻灯片“圆圈”上升。我曾尝试降低高度,但不起作用。

我以此为指导-> https://ionicframework.com/docs/components/#slides

1 个答案:

答案 0 :(得分:0)

已修复!我必须添加style =“ height:300px;”在离子载玻片上。