前幾天在做Vue項目開發的時候，因為之前別人寫的代碼有點小 bug，有人反應 IOS 上面的滑動點擊有點問題，于是讓我來幫忙解決，我看了看以前的代碼實現比較繁瑣，冗余，索性就直接自己重新寫了一套，供大家參考，如有更好的方式，歡迎及時交流~
我們先看看效果圖吧，畢竟無圖無真相啊~
效果圖
實現思路
具體實現思路如下：
具體實現
Html代碼
<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"> <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>注意：我這里的數據全是本地 mock 的~
Css樣式代碼
.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;}這是核心的樣式代碼，還有部分樣式重置代碼放在了 App.vue 里，通過計算根節點 html 的字體大小的腳本我放在了 index.html 中~
js代碼
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); } }}js代碼就這么一些，每個函數都有注釋說明， 相信都能看得懂， 就不多解釋了。
結語
怎么樣，是不是也米有想象中的那么難，只要理清思路即可，實現起來也并不是那么困難，當然我這里寫的只是我的一個實現思路而已，可能你們自己會有更好的實現方式，為什么不拿出來分享呢？
完整代碼我已經托管到 gitlub 上了,歡迎下載使用并留言！
新聞熱點
疑難解答
