vue3 上拉加载数据

<template>
  <div>
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:default>图书兄弟</template>
    </nav-bar>
    <van-tabs v-model="active" @click="tabClicks" class="ordertab-tab">
      <van-tab title="销量排序"></van-tab>
      <van-tab title="价格排序"></van-tab>
      <van-tab title="评论排序"></van-tab>
    </van-tabs>
    <div id="mainbox">
        <van-sidebar class="leftmenu" v-model="activeKey">
          <van-collapse v-model="activeName" accordion>
            <van-collapse-item v-for="item in category" :key="item.id" :title="item.name" :name="item.name">

                <van-sidebar-item v-for="sub in item.children" :title="sub.name"
                :key="sub.id" @click="getGoods(sub.id)"
                />

            </van-collapse-item>
          </van-collapse>
        </van-sidebar>
      <div class="goodsorder">
        <div class="ordertab">
          <van-tabs v-model="active" @click="tabClicks">
            <van-tab title="销量排序"></van-tab>
            <van-tab title="价格排序"></van-tab>
            <van-tab title="评论排序"></van-tab>
          </van-tabs>
        </div>
        <div class="goodslist">
          <div class="content">
            <van-card v-for="item in showGoods" :key="item.id"
                      @click="itemClick(item.id)"
                :num="item.comments_count"
                :tag="item.comments_count > 0 ? '流行' : '冷门'"
                :price="item.price"
                :desc="item.updated_at.slice(0,10)"
                :title="item.title"
                :thumb="item.cover_url"
                :lazy-load="true"
            />
          </div>
        </div>
      </div>
    </div>
    <back-top @bTop="bTop" v-show="isTabFixed"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import {getCategory} from "networks/category";
import {ref, reactive, onMounted, computed, watchEffect, nextTick} from 'vue';
import {useRouter} from "vue-router";
import {getCategoryGoods} from "networks/category";
import BackTop from "components/common/backtop/BackTop";
import BetterScroll from 'better-scroll';
export default {
  name: "Category",
  setup(){
    let activeKey = ref(0);
    let category = ref([]);
    let activeName = ref(1);
    let active = ref(2);
    let currentOrder = ref('sales');
    let currentCid = ref(0);
    let bscroll = reactive({});
    let isTabFixed = ref(false);
    const router = useRouter();
    // 数据模型
    const goods = reactive({
      sales:{page:1,list:[]},
      price:{page:1,list: []},
      comments_count:{page:1,list: []}
    })
    const showGoods = computed(() => {
      return goods[currentOrder.value].list;
    })
    // 分类详情列表
    const init = () => {
      getCategoryGoods('sales',currentCid.value).then(res => {
        goods.sales.list = res.goods.data;
      })
      getCategoryGoods('price',currentCid.value).then(res => {
        goods.price.list = res.goods.data;
      })
      getCategoryGoods('comments_count',currentCid.value).then(res => {
        goods.comments_count.list = res.goods.data;
      })
    }
    onMounted(() => {
      // 初始化获取分类数据
      getCategory().then(res => {
        category.value = res.categories;
      })
      // 初始化获取分类列表数据
      getCategoryGoods('sales',currentCid.value).then(res => {
        goods.sales.list = res.goods.data;
      })

      // 上拉加载更多
      // 创建BeeterScrool对象
      bscroll = new BetterScroll(document.querySelector('.goodslist'),{
        probeType: 3,  // 0,1,2,3  3就是只要在运行时就出发scroll事件
        click: true,  // 是否允许点击
        pullUpLoad: true  // 上啦加载更多，默认是false
      })
      // 上拉加载数据，触发pullingup
      bscroll.on("pullingUp",() => {
        // 完成上拉，等数据请求完成，要将新数据展示出来
        const page = goods[currentOrder.value].page + 1;
        getCategoryGoods(currentOrder.value,currentCid.value).then(res => {
          goods[currentOrder.value].list.push(...res.goods.data);
          goods[currentOrder.value].page += 1;

        })
        bscroll.finishPullUp();
        // 重新计算高度
        bscroll.refresh();
      })
      // 触发滚动事件
      bscroll.on('scroll',(position) => {
        isTabFixed.value = (-position.y) > 450;
      })
    })

    // 点击返顶回到顶部
    const bTop = () => {
      bscroll.scrollTo(0,0,500);
    }

    // 排序选项卡
    const tabClicks = (index) => {
      let order = ['sales','price','comments_count'];
      currentOrder.value = order[index];
      // 点击后初始化数据
      getCategoryGoods(currentOrder.value,currentCid.value).then(res => {
        goods[currentOrder.value].list = res.goods.data;

        nextTick(() => {
          // 重新计算高度
          bscroll && bscroll.refresh();
        })
      })
    }
    // 通过分类得到商品
    const getGoods = (cid) => {
      currentCid.value = cid;
      init();
      // console.log('当前分类的id' + currentCid.value);
      // console.log('排序的序号' + currentOrder.value);
    }

    // 监听 任何一个变量的变化
    watchEffect(() => {
      nextTick(() => {
        // 重新计算高度
        bscroll && bscroll.refresh();
      })
    })
    return {
      activeKey,
      category,
      activeName,
      active,
      currentOrder,
      tabClicks,
      currentCid,
      getGoods,
      goods,
      showGoods,
      bscroll,
      isTabFixed,
      bTop,
      itemClick:(id) => {
        console.log(id);
        router.push({path:'/detail',query:{id}});
      }
    };
  },
  components: {
    NavBar,
    BackTop
  }
}
</script>

<style scoped lang="less">
.ordertab-tab {
  position: fixed;
  top: 45px;
  right: 0;
  z-index: 999;
  width: 267px;
}
  #mainbox{
    display: flex;
    margin-top: 45px;
    .leftmenu {
      flex: 2;
      margin-top: 45px;
    }
    .goodsorder {
      flex: 5;
      .ordertab {
        width: 100%;
        height: 45px;
      }
      .goodslist {
        width: 100%;
        height: 50px;
        padding: 10px;

      }
    }
  }
</style>