原生tab切换(适用于购物商城中订单管理模块,例如:待付款/待发货/待收货等订单状态)
<!-- 头部tab栏切换 html部分--> <ul class="title-bar"> <li @click="changeStatus(1)"> <span :class="{'active':orderStatus==1}">待付款</span> </li> <li @click="changeStatus(2)"> <span :class="{'active':orderStatus==2}">待发货</span> </li> <li @click="changeStatus(3)"> <span :class="{'active':orderStatus==3}">待收货</span> </li> <li @click="changeStatus(7)"> <span :class="{'active':orderStatus==7}">已完成</span> </li> <li @click="changeStatus(5)"> <span :class="{'active':orderStatus==5}">退款</span> </li> </ul> <!-- 头部tab栏切换 css部分--> .title-bar { height: 0.8rem; background: #fff; font-size: 12px; position: relative; flex: 0 0 0.8rem; display: flex; align-items: center; width: 100%; li { flex:1; text-align: center; line-height: 0.8rem; span { display: inline-block; font-size: 0.26rem; color: #666666; border-bottom: 1px solid transparent; width: 80%; } .active { color: red; border-bottom: 1px solid red; } } color: #666666; } <!-- 头部tab栏切换 js部分--> 切记在data里面需要定义变量 methods:{ //tab栏切换 changeStatus(orderStatus) { this.orderStatus = orderStatus; this.init(); // 这个是调订单管理列表的接口,获取到的数据 }, }