Tab 标签页 + scroll-view 实现列表展示

参考地址

Tab 标签页
scroll-view

无tab切换，列表下拉加载组件

??——ES2020诞生了个新特性–空位合并操作符

如果表达式在??的左侧运算符求值为undefined 或null，就返回其右侧默认值。

let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;

代码实例

1. index.json

{
  "disableScroll": true,
  "usingComponents": {
    "report-list": "/components/scroll-list/report-list/index"
  }
}

2. index.wxss

//设置页面背景色，以及预防ios底部页面展示不全问题
page {
  background-color: #eee;
  padding-bottom: env(safe-area-inset-bottom);
}

//tab被点击时的样式
.tab-active-class {
  color: #45a9ed !important;
  font-size: 22rpx !important;
}

//tab默认的样式
.tab-class {
  color: #333 !important;
  font-size: 30rpx !important;
}

3. index.wxml

<van-tabs
  active="{{ active }}"
  bind:click="tabClick"
  color="#45a9ed"
  line-width="20"
  tab-active-class="tab-active-class"
  tab-class="tab-class"
>
  <van-tab
    title="{{query.title}}"
    wx:for="{{queryList}}"
    wx:for-item="query"
    wx:key="title"
  >
    <view class="mt-20">
      <scroll-view
        bindrefresherrefresh="bindrefresherrefresh"
        bindscrolltolower="bindscrolltolower"
        enhanced="{{true}}"
        fast-deceleration="{{true}}"
        refresher-background="{{color}}"
        refresher-default-style="none"
        refresher-enabled="{{true}}"
        refresher-threshold="{{40}}"
        refresher-triggered="{{refreshList[index]}}"
        scroll-top="{{scrollTop}}"
        scroll-y="{{true}}"
        style="height:calc(100vh - 44px);"
      >
        <view
          class="flex-row align-start width-full"
          slot="refresher"
          style="height: 70rpx;background-color:#eee;"
        >
          <view
            class="t-center width-full"
            style="background-color:#eee;"
          >
            <van-loading
              size="20px"
              type="spinner"
            />
          </view>
        </view>
        <report-list list="{{reportList[index]}}" />
      </scroll-view>
    </view>
  </van-tab>
</van-tabs>

4. index.js

import { getReports } from '../../../../../resource/patient-manage';
Page({
  data: {
    active: 0,   //选中的tabd的index
    queryList: [
      { title: '一年内', value: 365 },
      { title: '三年内', value: 1095 },
    ],        //tabs展示字段
    pageNumList: [1, 1],           //每一个tab的初始当前页为1
    refreshList: [false, false],   //都不刷新
    reportList: [[], []],		   // 列表数据
    totalPageList: [0, 0],         //总页数
    scrollTop: 0,				// 滚动离顶部的距离
    platPatientId: '',           
    reportType: '',
  },

  onLoad(e) {
    this.setData({
      platPatientId: e.id,
      reportType: e.reportType,
    });

    if (e.reportType == 1) {
      wx.setNavigationBarTitle({
        title: '检查报告单',
      });
    } else if (e.reportType == 2) {
      wx.setNavigationBarTitle({
        title: '检验报告单',
      });
    }
  },

  onShow() {
    this.initData();
  },

  async initData() {
  //刚开始全部请求，进行数据缓存，避免页面切换时，出现展示不流畅
    this.fetchData({ index: 0 });
    this.fetchData({ index: 1 });
  },

  async fetchData({ index, isLower, isRefresh }) {
  
    const params = {
      days: this.data.queryList[index].value,
      platPatientId: this.data.platPatientId,
      reportType: this.data.reportType,
      pageSize: 40,
      pageNum: this.data.pageNumList[index],
    };
    const { data } = await getReports(params);
    
    const list = data.list ?? [];
    const totalPage = data.totalPage;
    const reportList = [...this.data.reportList];
   
   //判断是否是触底加载
    reportList[index] = isLower ? [...reportList[index], ...list] : list;
    this.setData({ reportList });
    
    const totalPageList = [...this.data.totalPageList];
    totalPageList[index] = totalPage;
    this.setData({ totalPageList });
    
    //是否为刷新
    if (isRefresh) {
      const refreshList = [...this.data.refreshList];
      //设置刷新结束
      refreshList[index] = false;
      this.setData({ refreshList, scrollTop: 0 });
    }
  },

  // tab框点击
  tabClick(event) {
    const { index } = event.detail;
    this.setData({ active: index }, () => {
      this.fetchData({ index });
    });
  },

  //下拉刷新
  bindrefresherrefresh() {
    const pageNumList = [...this.data.pageNumList];
    //刷新后，设置当前页为1
    pageNumList[this.data.active] = 1;
    this.setData({ pageNumList }, () => {
      this.fetchData({ index: this.data.active, isRefresh: true });
    });
  },

 //上拉加载
  bindscrolltolower() {
    const index = this.data.active;
    const pageNumList = [...this.data.pageNumList];
    const totalPageList = [...this.data.totalPageList];
    
    if (pageNumList[index] >= totalPageList[index]) {
      return;
    }
    
    pageNumList[index] = pageNumList[index] + 1;
    this.setData({ pageNumList }, () => {
      this.fetchData({ index: index, isLower: true });
    });
  },
});

report-list参看对scroll-list的封装

效果图