JavaScript

超轻量级php框架startmvc

vue仿淘宝订单状态的tab切换效果

更新时间:2020-06-13 22:12:01 作者:startmvc
前几天刚开始使用vue做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订

前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换。

HTML 代码:


<div class="navigation">
 //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值
 <span v-for="(item, index) in navItems" v-touch:tap=" { event: navChange, params: [index] }">
 <em> {{item.text}} </em> 
 </span>
</div>
 //上面的v-touch:tap 是我们自己封装的点击事件指令,跟v-click用法差不多

<div class="content">
 <div class="main">
 //div item中是需要切换的订单数据,for循环遍历的是各种订单状态的集合orderAllItem,然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历
 <div class="item" v-for="item in orderAllItem[tabIndex]">
 <div class="title">
 <span class="id">订单号:{{item.orderId}}</span>
 <span class="status" >{{item.statusName}}</span>
 </div>
 <div class="toys" v-touch:tap="{ event: goToDetail, params: [item.orderId]}">
 <div class="toy" v-for="toy in item.toys">
 <img class="toyImg" :src="toy.image"/>
 <div class="area">
 <em class="name">{{toy.toyName}}</em>
 <span class="age">适合年龄:{{toy.ageRange}}</span
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

JS代码


var _default = (function(){
 var navs = [
 {
 'text': '全部订单', 
 },
 {
 'text': '待付款',
 },
 {
 'text': '待收货',
 }, 
 {
 'text': '待归还',
 },
 {
 'text': '已完成',
 }
 ];
 var orders= [
 //因为没有合适的数据来源,所以假装这里就是从后端请求的所有的订单集合,在下边data中你需要吧你分类的订单根据状态进行分类。
 ];
 return {
 name: 'index',
 mounted: function(){

 },
 destoryed: function(){

 },
 data: function(){
 //待付款
 var paymentsItem = [];
 //待收货
 var receiptsItem = [];
 //待归还
 var returnsItem = [];
 //已完成
 var completesItem = [];

 //把所有不同状态的订单通过if判断push到相对应的订单状态集合中。
 orders.forEach(function(order){
 if(order.status == 0){
 paymentsItem.push(order);
 };
 if(order.status == 3){
 receiptsItem.push(order);
 };
 if(order.status == 5){
 returnsItem.push(order);
 };
 if(order.status == 13){
 completesItem.push(order);
 }
 });
 //设置一个空数组,把所有状态下的订单集合放到空数组中,从0-5的顺序按照你的自己设置的tab切换的内容0-5的顺序对应排列,
 var orderAll = [ orders, paymentsItem, receiptsItem, returnsItem, completesItem];
 console.log(orderAll);
 return {
 navItems : navs,
 //全部订单分类的集合
 orderAllItem : orderAll,
 //设置
 tabIndex : 0,
 };
 },
 methods: {
 navChange: function (e, index){

 this.tabIndex = index;
// console.log(this.tabIndex)
 }
 }
 }
})();

export default _default;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

vue动态数据切换 vue tab切换