关于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>
相关推荐
2501_915909063 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106323 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909063 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007473 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
介一安全4 小时前
【Frida Android】基础篇6:Java层Hook基础——创建类实例、方法重载、搜索运行时实例
android·java·网络安全·逆向·安全性测试·frida
沐怡旸7 小时前
【底层机制】【Android】深入理解UI体系与绘制机制
android·面试
啊森要自信7 小时前
【GUI自动化测试】YAML 配置文件应用:从语法解析到 Python 读写
android·python·缓存·pytest·pip·dash
下位子8 小时前
『AI 编程』用 Codex 开发识字小帮手应用
android·openai·ai编程
Zender Han9 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
君逸臣劳9 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter