Web Front-end
JS Tutorial
Detailed example of Vue imitating the tab switching effect of Taobao order status
Detailed example of Vue imitating the tab switching effect of Taobao order status
This article mainly introduces the tab switching effect of vue imitating Taobao order status in detail. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.
I just started using vue for a project a few days ago, and then I fumbled and wrote a small dome for tab switching in the project, imitating the tab switching for Taobao order status.
HTML code:
<p 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>
</p>
//上面的v-touch:tap 是我们自己封装的点击事件指令，跟v-click用法差不多
<p class="content">
<p class="main">
//p item中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历
<p class="item" v-for="item in orderAllItem[tabIndex]">
<p class="title">
<span class="id">订单号：{{item.orderId}}</span>
<span class="status" >{{item.statusName}}</span>
</p>
<p class="toys" v-touch:tap="{ event: goToDetail, params: [item.orderId]}">
<p class="toy" v-for="toy in item.toys">
<img class="toyImg" :src="toy.image"/>
<p class="area">
<em class="name">{{toy.toyName}}</em>
<span class="age">适合年龄：{{toy.ageRange}}</span
</p>
</p>
</p>
</p>
</p>
</p>JS code
##
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;vue.js Example Sharing of Imitation Taobao Checkout Page
JavaScript Example of Imitation Taobao Implementation of Magnifying Glass Effect
Javascript small case: imitating Taobao search box user input
The above is the detailed content of Detailed example of Vue imitating the tab switching effect of Taobao order status. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Connection status in standby: Disconnected, reason: NIC Compliance
Feb 19, 2024 pm 03:15 PM
"The connection status in the event log message shows Standby: Disconnected due to NIC compliance. This means that the system is in standby mode and the network interface card (NIC) has been disconnected. Although this is usually a network issue , but can also be caused by software and hardware conflicts. In the following discussion, we will explore how to solve this problem." What is the reason for standby connection disconnection? NIC compliance? If you see the "ConnectivityStatusinStandby:DisConnected,Reason:NICCompliance" message in Windows Event Viewer, this indicates that there may be a problem with your NIC or network interface controller. This situation is usually
How to apply for a refund for a Meituan takeout order. Detailed guide to applying for a refund on an order.
Mar 12, 2024 am 10:50 AM
I believe that many users like some of the above functions very much, right? It not only saves you more time and effort, but also can always meet your various needs for food. Sometimes we order When taking out food, we find that some orders were delivered incorrectly or that our food cannot be eaten. At these times, we will definitely need to find some refund methods, so we also hope to be able to help everyone here. We can help you better. If there is a problem with some of the takeaways we order in the future, we can definitely protect our rights and interests directly. If the merchant does not agree, we will directly transfer manual customer intervention, so let’s take a look at the details now. Way to go, you can’t miss the excitement, hurry up
How to switch between 4g and 5g on Xiaomi Mi 14Ultra?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultra is one of the most popular Xiaomi models this year. Xiaomi 14Ultra not only upgrades the processor and various configurations, but also brings many new functional applications to users. This can be seen from the sales of Xiaomi 14Ultra mobile phones. It is very popular, but there are some commonly used functions that you may not know yet. So how does Xiaomi 14Ultra switch between 4g and 5g? Let me introduce the specific content to you below! How to switch between 4g and 5g on Xiaomi 14Ultra? 1. Open the settings menu of your phone. 2. Find and select the "Network" and "Mobile Network" options in the settings menu. 3. In the mobile network settings, you will see the "Preferred network type" option. 4. Click or select this option and you will see
How to set Momo status
Mar 01, 2024 pm 12:10 PM
Momo, a well-known social platform, provides users with a wealth of functional services for their daily social interactions. On Momo, users can easily share their life status, make friends, chat, etc. Among them, the setting status function allows users to show their current mood and status to others, thereby attracting more people's attention and communication. So how to set your own Momo status? The following will give you a detailed introduction! How to set status on Momo? 1. Open Momo, click More in the lower right corner, find and click Daily Status. 2. Select the status. 3. The setting status will be displayed.
Operation tutorial for switching from win11 home version to professional version_Operation tutorial for switching from win11 home version to professional version
Mar 20, 2024 pm 01:58 PM
How to convert Win11 Home Edition to Win11 Professional Edition? In Win11 system, it is divided into Home Edition, Professional Edition, Enterprise Edition, etc., and most Win11 notebooks are pre-installed with Win11 Home Edition system. Today, the editor will show you the steps to switch from win11 home version to professional version! 1. First, right-click on this computer on the win11 desktop and properties. 2. Click Change Product Key or Upgrade Windows. 3. Then click Change Product Key after entering. 4. Enter the activation key: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB and select Next. 5. Then it will prompt success, so you can upgrade win11 home version to win11 professional version.
How to implement dual system switching in Win10 system
Jan 03, 2024 pm 05:41 PM
Many friends may not be used to the win system when they first come into contact with it. There are dual systems in the computer. At this time, you can actually switch between the two systems. Let's take a look at the detailed steps for switching between the two systems. How to switch between two systems in win10 system 1. Shortcut key switching 1. Press the "win" + "R" keys to open Run 2. Enter "msconfig" in the run box and click "OK" 3. In the open "System Configuration" In the interface, select the system you need and click "Set as Default". After completion, "Restart" can complete the switch. Method 2. Select switch when booting 1. When you have dual systems, a selection operation interface will appear when booting. You can use the keyboard " Up and down keys to select the system
How to check server status
Oct 09, 2023 am 10:10 AM
Methods to view server status include command line tools, graphical interface tools, monitoring tools, log files, and remote management tools. Detailed introduction: 1. Use command line tools. On Linux or Unix servers, you can use command line tools to view the status of the server; 2. Use graphical interface tools. For server operating systems with graphical interfaces, you can use the graphics provided by the system. Use interface tools to view server status; 3. Use monitoring tools. You can use special monitoring tools to monitor server status in real time, etc.
Switch the dual system boot mode of Apple computer
Feb 19, 2024 pm 06:50 PM
How to switch between Apple dual systems when starting up Apple computers are powerful devices. In addition to their own macOS operating system, you can also choose to install other operating systems, such as Windows, to achieve dual system switching. So how do we switch between the two systems when booting? This article will introduce to you how to switch between dual systems on Apple computers. First of all, before installing dual systems, we need to confirm whether our Apple computer supports dual system switching. Generally speaking, Apple computers are based on
