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 相关文章推荐
js tab 选项卡
Apr 26 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
pycharm远程调试openstack代码
2017/11/21 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python模块导入的细节详解
2018/12/10 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
国家助学金获奖感言
2014/01/31 职场文书
党校学习自我鉴定
2014/02/24 职场文书
餐厅总厨求职信
2014/03/04 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
募捐感谢信
2015/01/22 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python