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 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
vue props 一次传多个值实例
Jul 22 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
如何正确理解vue中的key详解
2019/11/02 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
简单谈谈python中的多进程
2016/11/06 Python
python如何重载模块实例解析
2018/01/25 Python
详解python分布式进程
2018/10/08 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
生产助理岗位职责
2014/06/18 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
公司2014年度工作总结
2014/12/10 职场文书