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


Posted in Javascript onJune 23, 2020

前几天刚开始使用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;

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

Javascript 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
微信小程序input抖动问题的修复方法
Mar 03 Javascript
五步轻松实现zTree的使用
Nov 01 #Javascript
BootStrap TreeView使用实例详解
Nov 01 #Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 #Javascript
详解Vue组件实现tips的总结
Nov 01 #Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
You might like
php实现的在线人员函数库
2008/04/09 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
新浪的图片新闻效果
2007/01/13 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
一份python入门应该看的学习资料
2018/04/11 Python
django 多数据库配置教程
2018/05/30 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
对python字典过滤条件的实例详解
2019/01/22 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python 中@property的用法详解
2020/01/15 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
保安员岗位职责
2013/11/17 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
python如何在word中存储本地图片
2021/04/07 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server