Question

在android网络视图中，我的应用具有无限滚动。当我在某些页面中删除routerLink时，它可以正常工作，但并非在所有情况下都可以在android端处理此错误？这是html / css / js代码。当我删除滑块和此自定义标签：icon-category-preview和img标签的routerLink时，即使添加多个img以增加滚动页面高度，它也可以正常工作

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ContentService} from '@shared/services/content.service';
import {AppStatusInterface} from '@shared/interface/app-status.interface';
import {AppStatusService} from '@shared/services/app-status.service';
import {ArticleInterface} from '@shared/interface/article.interface';
// import {DragScrollComponent} from 'ngx-drag-scroll/lib';

@Component({
  selector: 'icon-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {


  follow = true;
  enablePan = true;

  private arttypeid;
  private params;
  private queryparams: any;
  public appId: any;
  public articletype: any;
  public articletype0: any;
  public articletype1: any;
  public articletype2: any;
  public articletype3: any;
  public articletype4: any;
  public articletype5: any;
  public articletype6: any;
  public articleList1: ArticleInterface[];
  public articleList2: ArticleInterface[];
  public articleList3: ArticleInterface[];
  public articleList4: ArticleInterface[];
  public articleList5: ArticleInterface[];
  public articleList6: ArticleInterface[];
  public appStatus: AppStatusInterface;
  public articleConf;
  public articleMode;


  // @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  // leftNavDisabled = false;
  // rightNavDisabled = false;
  // index = 0;

  constructor(private router: Router,
              private contentService: ContentService,
              private activatedRoute: ActivatedRoute,
              private appStatusService: AppStatusService) {
  }


  ngOnInit() {
    this.articleMode = this.router.url.split('/')[2];
    this.queryparams = this.activatedRoute.snapshot.queryParams;


    this.appStatusService.getStatus.subscribe((status: AppStatusInterface) => {
      this.appId = status.appId;
      this.appStatus = status;
      this.articleConf = {
        appName: this.appStatus.appName,
        articleMode: this.articleMode
      };
    });

    this.contentService.getallarticletype(this.appId).subscribe(res => {
      this.articletype = res.lstArticleType.sort((a, b) => (a.orderView > b.orderView) ? 1 : -1);
      this.articletype0 = this.articletype[0];
      this.articletype1 = this.articletype[1];
      this.articletype2 = this.articletype[2];
      this.articletype3 = this.articletype[3];
      this.articletype4 = this.articletype[4];
      this.articletype5 = this.articletype[5];
      this.articletype6 = this.articletype[6];

      if (this.articletype) {
        let count = 1;
        for (const item of  this.articletype) {
          if (count !== 3) {
            this.getArtticle(item.arttypeid, count);
          }
          count++;
        }
      }
    });


  }

  getArtticle(articleId, count) {
    this.params = {
      'arttypeid': articleId,
      'parent_arttype': null,
      'pageSize': 10,
      'pageNumber': 0
    };
    this.contentService.getAllArticle(this.params).subscribe((articleList: ArticleInterface[]) => {
        switch (count) {
          case 1:
            this.articleList1 = articleList;
            break;
          case 2:
            this.articleList2 = articleList;
            break;
          case 4:
            this.articleList3 = articleList;
            break;
          case 5:
            this.articleList4 = articleList;
            break;
          case 6:
            this.articleList5 = articleList;
            break;
          case 7:
            this.articleList6 = articleList;
            break;
        }
      }
    );
  }
}

.slider{
  height: 35vh;
  margin-top: 45px;
}
.main-container{
  padding: 20px;
}

.main-body{
  padding: 0 15vw;
  position: relative;
  margin-top: 100px;
  img{
    width: 100%;
    max-height: 25vh;
  }
}

@media screen and (max-width: 750px) {
  .slider{
    margin-top: 35px;
  }
  .main-container{
    padding: 10px 10px 30px 10px;
  }
  .main-body{
    padding: 0;
    margin-top: 75px;
  }
}

<section class="main-body">
  <ngb-carousel *ngIf="articleList1">
    <ng-template ngbSlide *ngFor="let article of articleList1" >
      <img [src]="article.articlePoster" [alt]="article.articleTitle">
      <div class="carousel-caption">
        <p>{{article.articleTitle}}</p>
      </div>
    </ng-template>
  </ngb-carousel>
</section>


<main class="main-container">
  <icon-category-preview  [articleData]="articletype0" [articleConf]="articleConf" [articleList]="articleList1"></icon-category-preview>
  <img [src]="'./assets/images/chakavak/'+articletype2?.arttypeimage" alt="" style="width: 100%; margin-bottom: 15px;" [routerLink]="['/chakavak/article' + articletype2?.routeUrl + '/' + articletype2?.arttypeid]">
  <icon-category-preview  [articleData]="articletype1" [articleConf]="articleConf" [articleList]="articleList2"></icon-category-preview>
  <icon-category-preview  [articleData]="articletype3" [articleConf]="articleConf" [articleList]="articleList3"></icon-category-preview>
  <icon-category-preview  [articleData]="articletype4" [articleConf]="articleConf" [articleList]="articleList4"></icon-category-preview>
  <icon-category-preview  [articleData]="articletype5" [articleConf]="articleConf" [articleList]="articleList5"></icon-category-preview>
  <icon-category-preview  [articleData]="articletype6" [articleConf]="articleConf" [articleList]="articleList6"></icon-category-preview>
</main>

Answer 1

尝试删除路由器链接属性，并检查其是否工作。

屏幕在android Webview中不断滚动

1 个答案: