vue 后台返回列表H5点击按钮加载更多分页数据与van-tab记住选中状态

性野喜悲

已于 2023-07-15 18:32:14 修改

阅读量607

点赞数

分类专栏：经验分享 vue 文章标签： vue.js javascript 前端

于 2023-07-11 17:49:59 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/131665783

版权

效果图（点击更多订单加载，一次加载10条）：

<template>
  <div id="order" class="wap-el page-container wap-com-page">
    <section>
      <com-header></com-header>
    </section>
    <div class="com-top-blue-bg">
      <div class="com-top-blue-bg-cont"></div>
    </div>
    <div class="order-box">
      <div class="com-title-box">
        <!-- 返回按钮 -->
        <div class="wap-page-return" @click="$router.go(-1)"></div>
        <div class="com-page-title">我的订单</div>
      </div>
      <van-tabs v-model="activeStatus" @change="changeTab" animated>
        <van-tab
          v-for="item in orderTitle"
          :key="item.orderStatus"
          :title="item.name"
        >
          <div class="order-cont" v-show="isData">
            <div
              class="order-tab-content"
              v-for="(item1, index1) in list"
              :key="index1"
              @click="goDetail(item1)"
            >
              <div class="order-tab-box">
                <div class="order-tab-title-box">
                  <div class="order-tab-title flex-center-start">
                    <img
                      class="order-tab-title-img"
                      :src="item1.toolApplicationIcon"
                      alt=""
                    />
                    <div class="order-tab-title-text">
                      {
  { item1.toolApplicationName }}
                    </div>
                  </div>
                  <div class="order-status-box">
                    <div
                      class="order-status 1"
                      :class="&