移動端無限滾動/橫向(X軸)tab選擇

無限滾動并加載資料

其中還有加載時圖檔的展示

這裡結合ionic4寫的

// 統一處理結果
  handleResult(res: CommonProductResult) { // 定義下接口回值的屬性
    this.isNoSuch = false; //  加載時的圖檔
    this.isWaiteList = false; //傳回無資料時給占位符
    if (!!res.list.length) {
      if (this.pageNum > DEFAULT_PAGE_NUM) { // 判斷第幾頁 感覺這個判斷寫的有點淤積
        this.commodityList = [...this.commodityList, ...res.list];// 滾動加載
      } else {
        this.commodityList = res.list;  // 普通請求
      }
    } else if (!res.list.length) {
      if (!!this.commodityList) {
        this.isNoSuch = false; // 加載時的圖檔 以後可以優化到observice(Rxjs)
        this.pageNum = 1; // 傳回為空時回到第一頁
      } else if (!this.commodityList) {
        this.isNoSuch = true;
        this.pageNum = 1;
      }
    }
  }
  // 無限滾動
  async doInfinite(ev) {
    this.pageNum++;
    const param = {
      // 這就是接口入參嘛
    };
    const res = await this.service.obtainList({ ...param }); // 調用service方法并取值
    this.handleResult(res); // 處理資料的一個函數
    ev.target.complete();  // ionic的方法
    if (this.pageNum * DEFAULT_PAGE_SIZE >= this.commodityCount) {
      ev.target.disable = true; // ionic的方法
    }
  }

  // 頁面滾動處理
  handleScroll(ev: CustomEvent) {
    this.scrollTop = ev.detail.currentY;
  }
           

Html給一個不完整的Demo

<ion-content>
  <!-- 産品清單 -->
  <div class="container bg-color-gray">
    <div class="commodity-box">
      <div class="commodity-size" *ngFor="let commodity of commodityList">
        <img class="commodity-img" [src]="commodity.img" />
        <span class="commodity-span">{{commodity.productname}}</span>
      </div>
    </div>
    <ion-infinite-scroll
      [disabled]="!commodityList.length"
      (ionInfinite)="doInfinite($event)"
    >
      <ion-infinite-scroll-content loadingSpinner="crescent">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
    <loading
      *ngIf="commodityList.length && pageNum === DEFAULT_PAGE_NUM"
      [load]="loading$ | async"
    ></loading>
    <loading-skeleton
      length="9"
      *ngIf="isWaiteList"
    ></loading-skeleton>
  </div>
  <!-- 查無此産品 -->
  <div class="no-such" *ngIf="isNoSuch">
    <div class="no-such-img"></div>
    <span class="no-such-span">Sorry, the product you searched cannot be found at the moment.</span>
  </div>
</ion-content>
           

橫向滾動

<ul [ngClass]="{'menu-box': 'true'}" id="menuBox">
    <li
      *ngFor="let item of classList; index as len"
      [ngClass]="{'menu-content': classListIndex !== item.index ,'menu-discoloration': classListIndex == item.index}"
      [id]="'li' + len + 'th'"
      (click)="changeHandleWarehouse(item.index, len)"
    >
      <span class="menu-title">{{item.title}}</span>
    </li>
  </ul>
           

// 橫向滑動條
.menu-box {
  width: 100%;
  height: rem(44);
  background: #ffffff;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  // position: fixed;
  // top: rem(46);
  // z-index: 10;
  .menu-content {
    display: inline-block;
    margin: rem(11) rem(10);
    color: #999999;
    line-height: rem(22);
    font-size: 16px;
    text-align: center;
    &:first-child {
      margin-left: rem(15);
    }
  }

  .menu-discoloration {
    display: inline-block;
    margin: rem(11) rem(10);
    color: #ff7700;
    border-bottom: 2px solid rgba(255, 119, 0, 1);
    padding-bottom: rem(9);
    line-height: rem(22);
    font-size: 16px;
    text-align: center;
    &:first-child {
      margin-left: rem(15);
    }
  }
}
.menu-box::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
           

async changeHandleWarehouse(comeFrom = 'all', len: number) {
    // 倉庫選擇index 橫向滑動
    const menuBox = document.getElementById('menuBox');
    let needScroolTo = 0; // 第一個li的長度
    for (let i = 0; i < len; i++) {
      const liTh = document.getElementById(`li${i}th`);
      const liThWidth = parseInt(window.getComputedStyle(liTh).width, 10);
      needScroolTo += liThWidth;
    }
    menuBox.scrollTo(needScroolTo, 0);
    // 接取接口
    this.classListIndex = comeFrom;
    this.isNoSuch = false;
    this.isWaiteList = true;
    this.content.scrollToTop(0);
    await this.getList({ nationType: this.classListIndex, pageSize: 10 });
  }