uniapp 之 tab栏 切换数据渲染不同状态

​

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情​

前言

前面讲解些 tab栏是如何切换的，那下面就给大家演示下

​

 它们的状态是怎么切换过来的，很简单

​

 上面就是最终的效果图

最开始时，后端把全部订单的所有数据，包含一些状态都返给我了，

我开始想的，是通过 先过滤数组，找到自己需要的状态对应的数组，然后把那个数组传递给tab栏切换到对应的页面，通俗一点就是，把已完成状态的数组，传递给已完成那个组件，进而渲染已完成的数据，但，最终发现，这样一些的话，要 C全部订单的 样式，写起来有些麻烦，

后来我请教大哥，大哥说，他们那边会给我一个带有状态值的接口，当值为 1 时，就渲染全部订单，为三时就渲染已完成的数据

这样一来，我就轻松多了，就不用把值传来传去的了

具体代码，如下

这里面的话 是因为后端反的状态值 是 1 ， 2， 3 就对应是的 下面的index

<template>
  <view>
    <view class="tab_nav">
      <view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':current === index}" @click="checked(index,item.index)">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="nav_item">
      <Indent :indentList="indentList"></Indent>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        current: 0,
        navList: [{
          index: '1',
          title: '全部订单'
        }, {
          index: '2',
          title: "进行中"
        }, {
          index: '3',
          title: "已完成"
        }],
        indentList: [],
        pageSize: 10,
        pageNum: 1,
        // 总条数
        total: 0,
        isLoading: false,
        orderStatus: '1'
      }
    },
    onLoad() {
      this.getIndent()
    },
    // 上拉刷新
    onPullDownRefresh() {
      this.pageNum = 1
      this.indentList = []
      this.getIndent(uni.stopPullDownRefresh)
    },
    // 触底事件
    onReachBottom() {
      // 判断当前数据是否已经是全部数据
      if (this.pageNum * this.pageSize >= this.total) {
        return uni.$showMsg('已经到底了')
      }
      if (this.isLoading) return
      //如果是在请求过程中,就不允许翻页 - 节流
      //让页数加1 
      this.pageNum++
      this.getIndent()
    },
    methods: {
      checked(index, res) {
        this.current = index
        this.orderStatus = res
         this.pageNum = 1
        // 清空
        this.indentList = []
        this.getIndent()
      },
      // 发送查询订单请求
      async getIndent(orderFn) {
        this.isLoading = true
        const params = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          orderStatus: this.orderStatus
        }
        const {
          data: {
            obj
          }
        } = await uni.$http.post('/uniapp/order/getOrderList',
          params
        )
        this.isLoading = false
        // 判断是不是在下拉刷新中调用，如果是，关闭
        orderFn && orderFn()
        console.log('查询订单信息', obj);
        // this.indentList = [...this.indentList, ...obj.list]
        this.indentList = obj.list
        this.total = obj.total
        console.log(this.indentList, this.total);
      },
    },
  }
</script>


<style lang="scss" scoped>
  .tab_nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab_nav .navTitle {
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    font-family: Alibaba PuHuiTi;
    color: #333;
  }

  .active {
    position: relative;
    color: #1F75FE;
  }

  .active::after {
    content: "";
    position: absolute;
    width: 100rpx;
    height: 4rpx;
    background-color: #1F75FE;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
</style>

最主要的是这句代码 

 checked(index, res) {
        this.current = index
        this.orderStatus = res
        this.getIndent()
      },

修改

这里面添加了 this.pageNum = 1 以及 this.indentList = []

是因为我在后续中,发现 若不加 this.pageNum = 1,它切换过去的时候,会展示pageNum 为2的数据,除非下拉刷新的时候才会展示 第一页的数据

 checked(index, res) {
        this.current = index
        this.orderStatus = res
        this.pageNum = 1
        // 清空
        this.indentList = []
        this.getIndent()
      },

​