关于vantUI的导航组件tab标签页在ios和安卓中运用遇到的坑

vantTab的默认值

应用场景

根据路由传值设置默认tab页,获取不同的数据并进行展示

问题描述

ios可正常按照路由传值默认tab页,安卓始终默认tabList的第一个value值,疑安卓系统中不接受dataMap.tabActive为空或者安卓中onMouted中的赋值与dataMap中的空值自动赋值同时执行


javascript 复制代码
<template>
  <div class="target-list-bg">
    <div class="top">
      <van-tabs v-model:active="tabActive" class="data-tab-bg">
        <template v-for="tab in tabList" :key="tab.value">
          <van-tab :name="tab.value">
            <template #title>
              <span class="tab-title">{{ tab.title }}</span>
            </template>
          </van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="bussiness-data-list">
       <div class="item-title">{{ totalItem.indexName }}</div>
       <div class="list-item-con">
         <div
           class="list-item"
           v-for="(list, listIndex) in totalItem.cloumn"
           :key="listIndex"
         >
           <p class="num">
             <span>{{ list.cloumnValue }}</span>
             <img
               v-if="
                 list.cloumnValue != 0 &&
                 list.cloumnName.indexOf('较') > -1 &&
                 list.cloumnValue != '0%'
               "
               :src="
                 require(`@/assets/img/operate/${
                   (list.cloumnValue + '').indexOf('-') > -1 ? 'down' : 'up'
                 }.png`)
               "
             />
           </p>
           <p class="text">{{ list.cloumnName }}</p>
         </div>
       </div>
     </div>
  </div>
</template>
原始代码

ios正常监听到onMounted的tabActive赋值;安卓watch的值为tab1(即tabList的第一个value值)

javascript 复制代码
 <script>
import { reactive, onMounted, toRefs, getCurrentInstance, watch } from "vue";
import { homeRequest } from "@/api/home.js";
import { useRoute } from "vue-router";

export default {
  name: "dataTabTargetList",
  setup() {
    const route = useRoute();
    const dataMap = reactive({
      tabActive:  "", //当前考核指标分类
      // 考核指标分类
      tabList: [
        {
          title: "TAB1",
          value: "CXCK",
        },
        {
          title: "TAB2",
          value: "DZYH",
        },
        {
          title: "TAB3",
          value: "DFGZ",
        },
        {
          title: "TAB4",
          value: "ZNGL",
        },
      ],
      totalItem: {},
    });
    const methodsMap = reactive({
      getDataList: () => {
        let params = {
         xxx
        };
        homeRequest.getAwdmTIndexExamineMap(params).then((res) => {
          dataMap.totalItem= res.data.payload;
        });
      },
    watch(
      () => dataMap.tabActive,
      (val) => {
        console.log('tabActive变化了',val)
        if (val[0]) {
          methodsMap.getDataList(val[0]);
        }
      }
    );
    onMounted(() => {
    //在mounted里面赋值tab的初始值,然后在watch中监听tabActive变化去调取接口
   	  console.log('route.query.tabActive',route.query.tabActive)
      let routeInfo = route.query.tabActive;
      dataMap.tabActive = routeInfo ? routeInfo : "CXCK";
      console.log(' dataMap.tabActive', dataMap.tabActive)
    });
    return { ...toRefs(dataMap) };
  },
};
</script>
更正代码

调整dataMap中tabActived直接赋值,onMounted中调用获取接口后问题解决

javascript 复制代码
 <script>
import { reactive, onMounted, toRefs, getCurrentInstance, watch } from "vue";
import { homeRequest } from "@/api/home.js";
import { useRoute } from "vue-router";

export default {
  name: "dataTabTargetList",
  setup() {
    const route = useRoute();
    const dataMap = reactive({
      tabActive:  route.query.tabActive||'CXCK', //当前考核指标分类
      // 考核指标分类
      tabList: [
        {
          title: "TAB1",
          value: "tab1",
        },
        {
          title: "TAB2",
          value: "tab2,
        },
        {
          title: "TAB3",
          value: "tab3",
        },
        {
          title: "TAB4",
          value: "tab4",
        },
      ],
      totalItem: {},
    });
    const methodsMap = reactive({
      getDataList: () => {
        let params = {
         xxx
        };
        homeRequest.getAwdmTIndexExamineMap(params).then((res) => {
          dataMap.totalItem= res.data.payload;
        });
      },
    watch(
      () => dataMap.tabActive,
      (val) => {
        if (val) {
          methodsMap.getDataList();
        }
      }
    );
    onMounted(() => {
      methodsMap.getDataList()
    });
    return { ...toRefs(dataMap) };
  },
};
</script>
相关推荐
CYRUS_STUDIO1 小时前
利用 Linux 信号机制(SIGTRAP)实现 Android 下的反调试
android·安全·逆向
CYRUS_STUDIO1 小时前
Android 反调试攻防实战:多重检测手段解析与内核级绕过方案
android·操作系统·逆向
黄林晴5 小时前
如何判断手机是否是纯血鸿蒙系统
android
火柴就是我5 小时前
flutter 之真手势冲突处理
android·flutter
法的空间6 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
循环不息优化不止6 小时前
深入解析安卓 Handle 机制
android
恋猫de小郭6 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
jctech6 小时前
这才是2025年的插件化!ComboLite 2.0:为Compose开发者带来极致“爽”感
android·开源
用户2018792831676 小时前
为何Handler的postDelayed不适合精准定时任务?
android
叽哥6 小时前
Kotlin学习第 8 课:Kotlin 进阶特性:简化代码与提升效率
android·java·kotlin