移动端无限滚动/横向(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 });
  }