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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
vue+axios实现登录拦截的实例代码
May 22 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
五步轻松实现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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
详解Python中列表和元祖的使用方法
2015/04/25 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python-opencv 双线性插值实例
2020/01/17 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
卫校毕业生自我鉴定
2014/09/28 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
2015年教研员工作总结
2015/05/26 职场文书
校运会广播稿
2015/08/19 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Python制作动态字符画的源码
2021/08/04 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫