ng|移动端无限滚动/横向(X轴)tab选择 ng|JS啊

无限滚动并加载数据 【ng|移动端无限滚动/横向(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

class="commodity-span">{{commodity.productname}} class="no-such-span">Sorry, the product you searched cannot be found at the moment.

横向滚动

class="menu-title">{{item.title}}

// 横向滑动条 .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 }); }