Applet with multiple tabs and Swipers + paging of each tab

wxml： 

<!-- header -->
<view class="flex flex-col flex-fv flex-fh">
  <view class="flex flex-hb flex-ve text-9EA0A4 font32">
    <view class="flex flex-ve" bindtap="changeTab">
      <view class="mr40 line_height1 {
   { activeIndex == 0 ? 'text-2E3238 font48 font-w':'' }}" data-index="0">tab0</view>
      <view class="mr40 line_height1 {
   { activeIndex == 1 ? 'text-2E3238 font48 font-w ':'' }}" data-index="1">tab1</view>
      <view class="mr40 line_height1 {
   { activeIndex == 2 ? 'text-2E3238 font48 font-w':'' }}" data-index="2">tab2</view>
    </view>

  </view>

  <view class="f1">
    <swiper class="flex-fv" bindchange="bindSwiperChange" current="{
   { activeIndex }}">
      <!-- tab0 -->
      <swiper-item class="bg-red">
         <scroll-view class="flex-fv" scroll-y bindscrolltolower="scrolltolower">
          <block wx:for="{
   { tabData[0].list }}" wx:key="index">
              <view></view>
          </block>
        </scroll-view>
      </swiper-item>
      <!-- tab1 -->
      <swiper-item class="bg-green">
        <scroll-view class="flex-fv" scroll-y bindscrolltolower="scrolltolower">
          <block wx:for="{
   { tabData[1].list }}" wx:key="index">
              <view></view>
          </block>
        </scroll-view>
      </swiper-item>
      <!-- tab2 -->
      <swiper-item class="bg-red">
        <scroll-view class="flex-fv" scroll-y bindscrolltolower="scrolltolower">
          <block wx:for="{
   { tabData[2].list }}" wx:key="index">
            <view style="height: 200rpx;" class="bg-white mt20">{
   { index }}</view>
          </block>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</view>


 

js：

import { dateFormatStr } from "../../../utils/util";
const app = getApp()
Page({

  /**
   *  Initial data of the page 
   */
  data: {
    tabData:[
      {
        list:[],
        page:1
      },
      {
        list:[],
        page:2
      },
      {
        list:[],
        page:3
      }
    ],
    activeIndex:0,

    page:1,
    pageSize:10,

    userInfo: {}, // Login personal data 
  },

  /**
   *  Life cycle function -- Monitor page loading 
   */
  onLoad(options) {
    this.setData({
      userInfo: app.globalData.userInfo,
    });
    this.getList()
  },


  //tab Switch 
  changeTab(e){
    const { index } = e.target.dataset;
    if(index >= 0){
      this.setData({
        activeIndex:index,
      });
    }
    this.getList()
  },

  /**
   * swiper Switch 
   * @param {*} e 
   */
  bindSwiperChange:function(e){
    var { current } = e.detail;
    this.setData({
      activeIndex:current,
    });
    this.getList()
  },

  /**
   *  obtain list
   */
  getList(){
    const { tabData,activeIndex,pageSize } = this.data
    const addlist = []
    this.setData({
      [`tabData[${activeIndex}].list`]:tabData[activeIndex].list.concat(addlist)
    })
  },

  /**
   *  Handling function of page pull bottom event 
   */
  scrolltolower() {
    const { tabData,activeIndex } = this.data
    console.log('tabData:',tabData)
    tabData[activeIndex].page++
    this.getList()
  },

 

  


  /**
   *  Users click the upper right corner to share 
   */
  onShareAppMessage() {

  }
})