Vue3 + vant + Tab组件动态传递实现选项卡切换

文章讲述了如何在Vue3项目中使用Vant框架的Tab标签页组件,通过v-model:active实现内容区域的动态切换,并且能根据传入的active值显示不同内容,如‘已收货’状态的高亮。
摘要由CSDN通过智能技术生成

Vue3使用vant框架,使用选项卡组件Tab 标签页,用于在不同的内容区域之间进行切换。并动态传递active等于2,使得“已收货”亮起。

图片示例展示

在这里插入图片描述

用到vue3的组件

Tab 标签页
选项卡组件,用于在不同的内容区域之间进行切换。通过 v-model:active 绑定当前激活标签对应的索引值,默认情况下启用第一个标签。

“我的订单”页面实现代码

<template>
  <div class="my-order-list">

    <div class="head-box">
      <van-tabs :active="active" @click-tab="onClickTab">
        <van-tab v-for="item in list" :key="item.type" :title="item.name"></van-tab>
      </van-tabs>

      <div class="list-box" v-for="(item, index) in arrList" :key="index">
        <!-- 控制四个组件 :  -->
        <AfterSalesItem v-if="item.type == 0" :arrList="item.name" class="card"></AfterSalesItem>
        <wait-receive-goods v-if="item.type == 1" class="card"></wait-receive-goods>
        <receive-goods v-if="item.type == 2" class="card"></receive-goods>
        <sale-list-view v-if="item.type == 3" class="card"></sale-list-view>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import AfterSalesItem from './components/item.vue'   					//引入组件
import WaitReceiveGoods from './components/wait-receive-goods.vue'      //引入组件
import ReceiveGoods from './components/receive-goods.vue'  				 //引入组件
import SaleListView from './components/sale-list.vue'  					 //引入组件
import { useRoute } from 'vue-router';

const route = useRoute();

const active = ref();

//定义数组
const list = ref([
  { name: "待发货", type: 0 },
  { name: "待收货", type: 1 },
  { name: "已收货", type: 2 },
  { name: "售后", type: 3 }
])
const arrList = ref([
  { name: "待发货", type: 0 }
])

const onClickTab = ({ title }) => {

  //通过点击返回的title('待发货,已发货....'),来匹配对应的active也就是type
  let type = 0
  if (title == "待发货") {
    type = 0
  } else if (title == "待收货") {
    type = 1
  } else if (title == "已收货") {
    type = 2
  } else if (title == "售后") {
    type = 3
  }

  arrList.value.forEach(i => {
    i.name = title
    i.type = type
  })

}

onMounted(() => {

  //获取“订单售后”传进的active值
  active.value = eval("(" + route.query.active + ")");

  // 根据active来判断,并匹配其代表的含义
  let title = "待发货"
  if (active.value == 0) {
    title = "待发货"
  } else if (active.value == 1) {
    title = "待收货"
  } else if (active.value == 2) {
    title = "已收货"
  } else if (active.value == 3) {
    title = "售后"
  }

  // 将获取到数据塞到本页面用来控制tabs的数组里面
  arrList.value.forEach(i => {
    i.name = title
    i.type = active.value
  })


})
</script>

<style lang="less" scoped>
.my-order-list {
  width: 100%;
  height: 100%;

  .head-box {
    width: 100%;
    background: rgb(245, 245, 245);
  }

  .list-box {
    margin: 0 10px;
    min-height: calc(100vh - 96px - 70px);

    .card {
      margin: 20px 0 0 0;
    }
  }


}
</style>
  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您可以通过使用Vant组件库和Vue 3来实现上拉分页和下拉刷新功能。下面是一个简单的示例代码: 首先,您需要安装Vant组件库。可以通过npm或yarn来安装。 ```bash npm install vant ``` 在Vue文件中,您需要引入Vant组件并注册使用它们。在需要使用上拉分页和下拉刷新的页面中,您可以使用Vant的`PullRefresh`和`List`组件实现。 ```vue <template> <div> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" @load="onLoad"> <!-- 这里是列表内容 --> <van-list-item v-for="item in list" :key="item.id">{{ item.text }}</van-list-item> </van-list> </van-pull-refresh> </div> </template> <script> import { ref, reactive } from 'vue'; export default { setup() { // 列表数据 const list = reactive([]); // 是否正在刷新 const refreshing = ref(false); // 是否正在加载更多数据 const loading = ref(false); // 是否已加载完所有数据 const finished = ref(false); // 模拟异步获取数据 const fetchData = () => { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: 1, text: 'item 1' }, { id: 2, text: 'item 2' }, { id: 3, text: 'item 3' }, ]); }, 1000); }); }; // 下拉刷新事件 const onRefresh = () => { refreshing.value = true; // 模拟异步获取最新数据 fetchData().then((data) => { list.splice(0, list.length, ...data); refreshing.value = false; finished.value = false; }); }; // 上拉加载更多事件 const onLoad = () => { loading.value = true; // 模拟异步加载更多数据 fetchData().then((data) => { if (data.length > 0) { list.push(...data); } else { finished.value = true; } loading.value = false; }); }; return { list, refreshing, loading, finished, onRefresh, onLoad, }; }, }; </script> ``` 在上述代码中,我们通过`van-pull-refresh`组件实现下拉刷新功能,并通过`van-list`组件实现分页加载功能。当页面触发下拉刷新事件时,我们可以通过异步获取最新数据并更新列表。当页面触发上拉加载更多事件时,我们可以通过异步加载更多数据并追加到列表末尾。 这样,您就可以使用VantVue 3来实现上拉分页和下拉刷新功能了。希望对您有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海鸥两三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值