Vue向右滑動刪除列表（自封裝元件）
阿新 • • 發佈：2018-11-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <title>Document</title> <style> body{ margin: 0 auto !important; } ul{ width: 100%; list-style: none; padding: 0; overflow: hidden; } .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: 78px; -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(-80px,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: 54px; height:54px; } .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: 80px; line-height: 50px; height: 100%; background: #ff4949; font-size: 19px; color: #fff; text-align: center; line-height: 72px; position: absolute; top: 0; right: -80px; } </style> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <div class="container"> <div class="page-title">滑動元件</div> <ul> <li class="list-item " v-for="(item,index) in list " data-type="0"> <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip(index)"> <img class="list-img" :src="item.imgUrl" alt=""> <div class="list-content"> <p class="title">{{item.title}}</p> <p class="tips">{{item.tips}}</p> <p class="time">{{item.time}}</p> </div> </div> <div class="delete" @click="deleteItem" :data-index="index">刪除</div> </li> </ul> </div> </div> <script> new Vue({ el: '#app', data () { return { list : [ { title : 'Chrome更新了' , imgUrl : 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/596dcc03554a7df640fdbb60f40a4dcd_121_121.jpg' , tips : '不再支援Flash視訊播放' , time : '上午 8:30' }, { title : '電影新資訊' , imgUrl : 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/596dcc03554a7df640fdbb60f40a4dcd_121_121.jpg' , tips : '電影《紅海行動》上映以來票房暴漲，很多國人表示對國產電影有了新的改觀' , time : '上午 12:00' }, { title : '聚焦兩會·共築中國夢' , imgUrl : 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/596dcc03554a7df640fdbb60f40a4dcd_121_121.jpg' , tips : '習近平代表的兩會故事' , time : '下午 17:45' }, { title : '微信團隊' , imgUrl : 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/596dcc03554a7df640fdbb60f40a4dcd_121_121.jpg' , tips : '您的帳號有異常登入，如非本人操作，請及時修改密碼' , time : '昨天' } ], startX : 0 , endX : 0 , } }, methods : { //跳轉 skip(value){ console.log(value) 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){ console.log(e) console.log("刪除") // 當前索引 let index = e.currentTarget.dataset.index; // 復位 this.restSlide(); // 刪除 this.list.splice(index,1); } } }) </script> </body> </html>
直接拿下來就可以，應該可以看的懂