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 相关文章推荐
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue实现评价星星功能
Jun 30 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
五步轻松实现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
德生PL330测评
2021/03/02 无线电
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python服务器端收发请求的实现代码
2014/09/29 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
实用的简历自我评价
2014/03/06 职场文书
本科生自荐信
2014/06/18 职场文书
公安学专业求职信
2014/07/27 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书