uni-app中tab触底更新交互

操作流程

1. 根据高亮下标，获取对应列表数据
2. 提取列表的分页参数，用于发送请求
3. 滚动触底事件，页码累加，数组追加，退出判断等业务和常规分页基本一致
   代码如下

参考代码

<script setup lang="ts">
let finish = ref(false)
// 滚动触底事件
let onScrolltolower = async () => {
  // 获取当前选项的下标
  let currentType = SubTypeList.value[activeIndex.value]
  /* 
  currentType.goodsItems.page 当前在第几页
  currentType.goodsItems.pages  总共多少页
   */
  if (currentType.goodsItems.page < currentType.goodsItems.pages) {
    // 当前页码累加
    currentType.goodsItems.page++
  } else {
    finish.value = true
    // 退出并轻提示
    return uni.showToast({ icon: 'none', title: '没有更多数据了~' })
  }
  if (!finish.value) {
    // 调用API进行传参
    let res = await reqGetHot(currMap!.url, {
      subType: currentType.id,
      page: currentType.goodsItems.page,
      pageSize: currentType.goodsItems.pageSize,
    })
    // 新的列表选项
    let newCurrentType = res.result.subTypes[activeIndex.value]
    // 追加数组
    currentType.goodsItems.items.push(...newCurrentType.goodsItems.items)
  }
}
</script>

<template>
    <!-- 推荐列表 -->
    <scroll-view
      v-for="(item, index) in subTypes"
      :key="item.id"
      v-show="activeIndex === index"
      scroll-y
      class="scroll-view"
      @scrolltolower="onScrolltolower"
    >
      <view class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          v-for="goods in item.goodsItems.items"
          :key="goods.id"
          :url="`/pages/goods/goods?id=${goods.id}`"
        >
          <image class="thumb" :src="goods.picture"></image>
          <view class="name ellipsis">{{ goods.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goods.price }}</text>
          </view>
        </navigator>
      </view>
      <view class="loading-text">
        {{ item.finish ? '没有更多数据了~' : '正在加载...' }}
      </view>
    </scroll-view>
  </view>
</template>