关于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>
相关推荐
android_xc9 分钟前
Android Studio适配butterknife遇到的坑
android·ide·android studio·butterknife
2501_9159184122 分钟前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张41 分钟前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
wjm0410061 小时前
ios面试八股文
ios·面试
米豆同学2 小时前
SufraceFlinger图像合成原理(3)-SurfaceFlinger中Layer的创建和销毁
android
米豆同学3 小时前
SufraceFlinger图像合成原理(2)-SurfaceFlinger与应用进程间的通信
android
用户2018792831673 小时前
uses-library:系统应用报NoClassDefFoundError问题
android
叽哥3 小时前
Kotlin学习第 4 课:Kotlin 函数:从基础定义到高阶应用
android·java·kotlin
mg6683 小时前
安卓玩机工具----安卓“搞机工具箱”最新版 控制手机的玩机工具
android·智能手机
诺诺Okami3 小时前
Android Framework- Activity启动2
android