Я работаю над проектом Ionic, где у меня есть страница, которая отображает для каждого дня недели элементы в горизонтальных свитках (ионы-слайды).Он также содержит ионное обновление.
Я хочу отобразить ярлык с названием дня в верхней части каждого списка, чтобы он перекрывал его (в моем css; позиция: абсолютная + верхняя: ...+ left: ... + z-index).
Когда я обслуживаю свой проект и просматриваю его в браузере моего компьютера, нет проблем, он работает нормально.Но на моем устройстве Android (доступ к моему серверу разработки через браузер или скомпилированное приложение) происходит следующее: метки, которые видны без прокрутки вниз, в порядке. Когда я прокручиваю вниз, чтобы увидеть другие дни, метки отображаются за элементами.Когда я нажимаю на ярлык, он «обновляется» и отображается правильно, пока я не прокручиваю снова.Когда я вытягиваю ионное обновление, даже не доходя до точки, где активируется функция обновления, все метки отображаются и остаются правильно.
Я думаю, это проблемас рендерингом Angular, но я не смог выяснить, какой ...
Вот мой код:
pages / home / home.html
<ion-navbar>
<ion-title>Items</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div *ngIf="productStatus == 'loaded'" class="productsContainer">
<day-products *ngFor="let day of weekdays" [products]="products[day.index]" [day]="day.longName"></day-products>
</div>
</ion-content>
pages /home / home.ts
import { Component } from '@angular/core';
import { NavController, Refresher } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public weekdays = [
{ longName: "Monday", index: 0 },
{ longName: "Tuesday", index: 1 },
{ longName: "Wednesday", index: 2 },
{ longName: "Thursday", index: 3 },
{ longName: "Friday", index: 4 },
{ longName: "Saturday", index: 5 },
{ longName: "Sunday", index: 6 }
];
products: Array<any>
productStatus: string;
constructor(public navCtrl: NavController) {
this.products = new Array<any>();
this.productStatus = 'loading';
}
ionViewDidLoad() {
this.fillProductArray();
}
fillProductArray() {
this.productStatus = 'loading';
this.products = new Array<any>();
for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
let day = new Array<any>();
for (let productIndex = 0; productIndex < 5; productIndex++) {
day.push({
name: 'Item ' + productIndex,
description: 'Description for item ' + productIndex + ' of day number ' + dayIndex
});
}
this.products.push(day);
}
this.productStatus = 'loaded';
}
doRefresh(refresher: Refresher) {
this.fillProductArray();
refresher.complete();
}
}
страницы / home / home.module.ts
import { HomePage } from "./home";
import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { DayProductsComponentModule } from "../../components/day-products/day-products.module";
@NgModule({
declarations: [HomePage],
imports: [
IonicPageModule.forChild(HomePage),
DayProductsComponentModule
]
})
export class HomePageModule {}
компоненты / day-products / day-products.html
<div class="wrapper">
<div class="day-name" ion-button #dayName>{{day}}</div>
<ion-slides centeredSlides="false" #slider>
<ion-slide *ngFor="let product of products">
<div class="card-container">
<ion-card class="scroll-item" #productCard>
<div class="image_wrapper">
<div class="image" [style.backgroundImage]="'url(http://placehold.it/500x500)'">
</div>
</div>
<ion-item class="product" text-wrap>
<h2>{{product.name}}</h2>
<p>{{product.description}}</p>
</ion-item>
</ion-card>
</div>
</ion-slide>
</ion-slides>
</div>
Компоненты / Day-продукты / Day-продукты.scss
day-products {
.wrapper {
position: relative;
.day-name {
top: -16px;
left: 24px;
position: absolute;
width: 120px;
padding-top: 0;
z-index: 100;
}
ion-slides {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 8px;
.swiper-slide {
height: auto;
width: 90%;
.slide-zoom {
height: 100%;
.card-container {
height: calc(100% - 10px);
ion-card {
margin-top: 0;
height: 100%;
display: inline-block;
.image_wrapper {
height: 150px;
width: 100%;
position: relative;
.image {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
}
}
}
}
}
}
.swiper-slide:only-child {
width: 100%;
}
}
}
}
Компоненты / Day-продукты / Day-продукты.ts
import { Component, ViewChild, Input } from '@angular/core';
import { Slides } from "ionic-angular";
@Component({
selector: 'day-products',
templateUrl: 'day-products.html'
})
export class DayProductsComponent {
@Input()
day: string;
@Input()
products: Array<any>;
@ViewChild('slider') slider: Slides;
constructor() {
}
ngAfterViewInit() {
this.slider.freeMode = true;
this.slider.slidesPerView = 'auto';
}
}
Компоненты / Day-продукты / Day-products.module.ts
import { NgModule } from "@angular/core";
import { DayProductsComponent } from "./day-products";
import { IonicModule, } from "ionic-angular";
@NgModule({
declarations: [DayProductsComponent],
imports: [
IonicModule
],
exports: [DayProductsComponent]
})
export class DayProductsComponentModule { }
package.json
{
"name": "horizontalScrollDemo",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "2.1.3",
"cordova-android": "7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^2.1.4",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "^5.5.7",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
Я был бы очень признателен за помощь !!
РЕДАКТИРОВАТЬ:
На моем устройстве в Firefox и родном браузере (Samsung) ярлыки отображаются так, как они должны быть.Кажется, проблема возникает только в Chrome (v. 69.0.3497.100).На моем компьютере в Chrome и Firefox дисплей в порядке.