Vue imitates QQ left slide to delete component function
When a friend was developing a vue project a few days ago, someone reported that there was a problem with the sliding click on IOS. Let us help solve it, so I rewrote the code. Below, I will share the vue imitation qq left-swipe deletion component function to Script House platform, friends who need it can refer to it
A few days ago, when I was developing the Vue project, because the code written by others had a small bug, someone reported that there was something wrong with the sliding click on IOS, so I asked I'm here to help solve it. I looked at the previous code implementation and it was cumbersome and redundant, so I simply re-wrote it myself for your reference. If there is a better way, please feel free to communicate in time~
Let’s take a look at the renderings first. After all, there is no truth without pictures~
Renderings
Implementation ideas
The specific implementation ideas are as follows:
In terms of layout, I use rem flex layout. For the specific structure and style, please refer to my Code, it is worth noting that the delete button at the end is placed at the end of each row through positioning, and it is hidden beyond the scope.
The left and right swipes are through touchstart and touchend events. By judging the start and end of the sliding, the offset in the horizontal direction x, if it is greater than a certain threshold, it is considered a left sliding, and if it is less than a certain threshold, it is considered a right sliding. The sliding is changed through the translate offset of the parent li element. My implementation method here is to declare the style in advance and switch the style by changing the type value of the current parent li
When clicking a certain slider, first determine whether all the current sliders are in the slide-out state. If so, you must first restore the status of all sliders. If not, the click will take effect. Here I am It just pops up an alter. The specific business can be filled in according to the actual situation.
Deletion is relatively simple. When the slider is drawn, a delete button appears. Click the button to get the current array index value. Through For the splice method of the array, just delete the corresponding array value
- Specific implementation
##Html code
<p class="container"> <p class="page-title">滑动组件</p> <ul> <li class="list-item " v-for="(item,index) in list " data-type="0"> <p class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip"> <img class="list-img" :src="item.imgUrl" alt=""> <p class="list-content"> <p class="title">{{item.title}}</p> <p class="tips">{{item.tips}}</p> <p class="time">{{item.time}}</p> </p> </p> <p class="delete" @click="deleteItem" :data-index="index">删除</p> </li> </ul> </p>
Note: The data here are all local mock~
Css style Code
.page-title{ text-align: center; font-size: 17px; padding: 10px 15px; position: relative; } .page-title:after{ content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #ccc; color: #ccc; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 2; } .list-item{ position: relative; height: 1.6rem; -webkit-transition: all 0.2s; transition: all 0.2s; } .list-item[data-type="0"]{ transform: translate3d(0,0,0); } .list-item[data-type="1"]{ transform: translate3d(-2rem,0,0); } .list-item:after{ content: " "; position: absolute; left: 0.2rem; bottom: 0; right: 0; height: 1px; border-bottom: 1px solid #ccc; color: #ccc; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); z-index: 2; } .list-box{ padding: 0.2rem; background: #fff; display: flex; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; justify-content: flex-end; position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; } .list-item .list-img{ display: block; width: 1rem; height: 1rem; } .list-item .list-content{ padding: 0.1rem 0 0.1rem 0.2rem; position: relative; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; } .list-item .title{ display: block; color: #333; overflow: hidden; font-size: 15px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; } .list-item .tips{ display: block; overflow: hidden; font-size: 12px; color: #999; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .list-item .time{ display: block; font-size: 12px; position: absolute; right: 0; top: 0.1rem; color: #666; } .list-item .delete{ width: 2rem; height: 1.6rem; background: #ff4949; font-size: 17px; color: #fff; text-align: center; line-height: 1.6rem; position: absolute; top:0; right: -2rem; }
export default{ name: 'index', data () { return { list : [ { title : 'Chrome更新了' , imgUrl : './static/images/Chrome.png' , tips : '不再支持Flash视频播放' , time : '上午 8:30' }, { title : '电影新资讯' , imgUrl : './static/images/Sina.png' , tips : '电影《红海行动》上映以来票房暴涨,很多国人表示对国产电影有了新的改观' , time : '上午 12:00' }, { title : '聚焦两会·共筑中国梦' , imgUrl : './static/images/video.png' , tips : '习近平代表的两会故事' , time : '下午 17:45' }, { title : '微信团队' , imgUrl : './static/images/Wechat.png' , tips : '您的帐号有异常登录,如非本人操作,请及时修改密码' , time : '昨天' } ], startX : 0 , endX : 0 , } }, methods : { //跳转 skip(){ if( this.checkSlide() ){ this.restSlide(); }else{ alert('You click the slide!') } }, //滑动开始 touchStart(e){ // 记录初始位置 this.startX = e.touches[0].clientX; }, //滑动结束 touchEnd(e){ // 当前滑动的父级元素 let parentElement = e.currentTarget.parentElement; // 记录结束位置 this.endX = e.changedTouches[0].clientX; // 左滑 if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){ this.restSlide(); parentElement.dataset.type = 1; } // 右滑 if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){ this.restSlide(); parentElement.dataset.type = 0; } this.startX = 0; this.endX = 0; }, //判断当前是否有滑块处于滑动状态 checkSlide(){ let listItems = document.querySelectorAll('.list-item'); for( let i = 0 ; i < listItems.length ; i++){ if( listItems[i].dataset.type == 1 ) { return true; } } return false; }, //复位滑动状态 restSlide(){ let listItems = document.querySelectorAll('.list-item'); // 复位 for( let i = 0 ; i < listItems.length ; i++){ listItems[i].dataset.type = 0; } }, //删除 deleteItem(e){ // 当前索引 let index = e.currentTarget.dataset.index; // 复位 this.restSlide(); // 删除 this.list.splice(index,1); } } }
Use vue to write a sample code for a carousel chart that imitates a simple book
Solution to vue- Loader issues in cli-created projects
The above is the detailed content of Vue imitates QQ left slide to delete component function. 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

How to delete Xiaohongshu notes? Notes can be edited in the Xiaohongshu APP. Most users don’t know how to delete Xiaohongshu notes. Next, the editor brings users pictures and texts on how to delete Xiaohongshu notes. Tutorial, interested users come and take a look! Xiaohongshu usage tutorial How to delete Xiaohongshu notes 1. First open the Xiaohongshu APP and enter the main page, select [Me] in the lower right corner to enter the special area; 2. Then in the My area, click on the note page shown in the picture below , select the note you want to delete; 3. Enter the note page, click [three dots] in the upper right corner; 4. Finally, the function bar will expand at the bottom, click [Delete] to complete.

1. First of all, it is false to block and delete someone permanently and not add them permanently. If you want to add the other party after you have blocked them and deleted them, you only need the other party's consent. 2. If a user blocks someone, the other party will not be able to send messages to the user, view the user's circle of friends, or make calls with the user. 3. Blocking does not mean deleting the other party from the user's WeChat contact list. 4. If the user deletes the other party from the user's WeChat contact list after blocking them, there is no way to recover after deletion. 5. If the user wants to add the other party as a friend again, the other party needs to agree and add the user again.

Both vivox100s and x100 mobile phones are representative models in vivo's mobile phone product line. They respectively represent vivo's high-end technology level in different time periods. Therefore, the two mobile phones have certain differences in design, performance and functions. This article will conduct a detailed comparison between these two mobile phones in terms of performance comparison and function analysis to help consumers better choose the mobile phone that suits them. First, let’s look at the performance comparison between vivox100s and x100. vivox100s is equipped with the latest

As a popular social e-commerce platform, Xiaohongshu has attracted a large number of users to share their daily life and shopping experiences. Sometimes we may inadvertently publish some inappropriate content, which needs to be deleted in time to better maintain our personal image or comply with platform regulations. 1. How to delete Xiaohongshu releases? 1. Log in to your Xiaohongshu account and enter your personal homepage. 2. At the bottom of the personal homepage, find the "My Creations" option and click to enter. 3. On the "My Creations" page, you can see all published content, including notes, videos, etc. 4. Find the content that needs to be deleted and click the "..." button on the right. 5. In the pop-up menu, select the "Delete" option. 6. After confirming the deletion, the content will disappear from your personal homepage and public page.

Xiaohongshu is a popular social e-commerce platform, and interactive comments between users are an indispensable method of communication on the platform. Occasionally, we may find that our comments have been deleted by others, which can be confusing. 1. How can I retrieve someone else’s deleted comments on Xiaohongshu? When you find that your comments have been deleted, you can first try to directly search for relevant posts or products on the platform to see if you can still find the comment. If the comment is still displayed after being deleted, it may have been deleted by the original post owner. At this time, you can try to contact the original post owner to ask the reason for deleting the comment and request to restore the comment. If a comment has been completely deleted and cannot be found on the original post, the chances of it being reinstated on the platform are relatively slim. You can try other ways

1. Open the Douyin app, click [Message] at the bottom of the interface, and click the chat conversation entry that needs to be deleted. 2. Long press any chat record, click [Multiple Select], and check the chat records you want to delete. 3. Click the [Delete] button in the lower right corner and select [Confirm deletion] in the pop-up window to permanently delete these records.

WeChat's file transfer assistant is available to every user. Some users use it as a memo to record some things. So how to completely delete WeChat File Transfer Assistant? Let me introduce it to you in detail below. How to completely delete WeChat File Transfer Assistant? Answer: [WeChat]-[Long press File Transfer Assistant]-[Delete this chat]. Specific steps: 1. First open the WeChat software. After entering the home page, we find [File Transfer Assistant] and press and hold; 2. Then a pop-up will be marked as unread, pin the chat to the top, do not display the chat, and delete the chat. Here We can click [Delete this chat];

With the continuous development of social media, Xiaohongshu has become an important platform for young people to share their lives, discover trends, and obtain inspiration. In this vibrant community, how to publish high-quality content and attract more attention and likes has become a concern for many users. 1. How to publish Xiaohongshu content? Before creating, it is crucial to choose a suitable topic. You can pick an engaging topic based on your interests and expertise. Doing so will not only keep you passionate about the writing process, but it will also make it easier for readers to relate to your work. 2. Carefully design the title: The title is the key to attracting readers to click. It should be concise and clear, and at the same time, it should be attractive and engaging. Avoid using exaggerated wording that may cause the reader to react
