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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery radio 操作代码
Mar 16 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue elementUI批量上传文件
Apr 26 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python dataframe NaN处理方式
2019/12/26 Python
运动会通讯稿400字
2014/01/28 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
幼儿教师培训感言
2014/03/08 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
小学生成绩单评语
2014/12/31 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
python运算符之与用户交互
2022/04/13 Python