您好,登錄后才能下訂單哦!
使用vue怎么實(shí)現(xiàn)左滑編輯與刪除?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
第一步:安裝 vue-touch
npm install vue-touch@next --save
第二步:main.js 中引入
import VueTouch from 'vue-touch'; Vue.use(VueTouch, { name: 'v-touch' });
第三步:使用(用v-touch包住你要左滑刪除的內(nèi)容)
<div class="wrap"> <v-touch v-on:panstart="onPanStart(key)" v-on:panmove="onPanMove" v-on:panend="onPanEnd" v-for="(item, key) in list" :key="key" > <!-- 下面div這一塊是我頁(yè)面需要左滑刪除的項(xiàng)目?jī)?nèi)容,你可以替換成你自己的 --> <div class="item df_sb item-p" :> <p class="left-img"> <img :src="item.image_url" alt> </p> <p class="url" v-if="item.redirect_url != '' ">{{item.redirect_url}}</p> <p class="city nothave" v-else>無(wú)</p> <p class="city">{{item.city}}</p> <div class="edit-delete df_sad" :ref="'editBtn' + key"> <div class="edit" @click="editFun('edit',item.id,item.image_url,item.redirect_url)"> <img src="../../assets/images/adver/ic_xiugai.png" alt> </div> <p class="edit-line"></p> <div class="ad-delete" @click="deleteFun(key,item.id)"> <img src="../../assets/images/adver/ic_shanchu.png" alt> </div> </div> </div> </v-touch> </div>
第四步:定義變量,以及方法,下面代碼可直接拷貝,將不需要的刪除換成自己的,需要的留著就行
<script> import httpApi from "../../http/httpApi"; export default { name: "", data() { return { swipe: "", // 滑動(dòng)的樣式 wd: 0, // 編輯和刪除按鈕的寬度之和 swipeWd: 0, // 已經(jīng)滑動(dòng)的距離 activeId: "", // 實(shí)際是上一次的活動(dòng)id //以上四個(gè)變量必須保留,下面的三個(gè)可以刪除 page: 1, size: 10, list: [] }; }, methods: { //請(qǐng)求列表數(shù)據(jù) getList($state) { let params = new URLSearchParams(); params.append("page", this.page); params.append("size", this.size); this.$post(httpApi.BANNERLIST, params) .then(res => { if (res.code == 10000) { if (res.data) { this.list = this.list.concat(res.data.list); this.page++; if (res.data.list.length === 10) { $state.loaded(); } else { $state.complete(); } } else { $state.complete(); } } else { $state.complete(); } }) .catch(err => { console.log(err); }); }, // 編輯 editFun(type, image_id, image, url) { this.$router.push({ path: "/issueAdvertising", }); }, // 刪除 deleteFun(index, image_id) { this.activeId = ""; //將上一次的活動(dòng)id制空 let params = new URLSearchParams(); params.append("agent_id", this.id); params.append("image_id", image_id); this.$post(httpApi.DELETEBANNER, params) .then(res => { if (res.code == 10000) { // 雖然請(qǐng)求刪除接口刪除了列表其中的某一項(xiàng)內(nèi)容,但是頁(yè)面上還有 //因此需要在本地?cái)?shù)組中也刪除,這樣才完美,下面這行代碼比較重要,可以寫(xiě)在你刪除接口成功后的地方 this.list.splice(index, 1); this.modal.toastFun("刪除成功"); } else if (res.code == 20000) { this.modal.toastFun(res.message); } }) .catch(err => {}); }, // 以下三個(gè)方法全部拷貝,無(wú)需修改 //滑動(dòng)位置 onPanStart(id) { event.preventDefault(); // 獲取右側(cè)按鈕寬度 let str = "editBtn" + id; this.wd = 1.2 * this.$refs[str][0].offsetWidth; // 初始化 if (this.activeId != id) { this.swipe = "transform:translateX(0px)"; this.swipeWd = 0; } this.activeId = id; }, //滑動(dòng)位置 onPanMove(event) { event.preventDefault(); let deltaX = event.deltaX; // 組件向左移動(dòng)直到最大距離 if (deltaX < 0 && deltaX > -this.wd) { // 向左滑動(dòng) this.swipe = "transform:translateX(" + deltaX + "px)"; this.swipeWd = deltaX; } if (deltaX > 0 && deltaX <= this.wd && this.swipeWd < 0) { // 向右滑動(dòng) let wx = deltaX + this.swipeWd; this.swipe = "transform:translateX(" + wx + "px)"; } }, // 結(jié)束位置 onPanEnd(event) { event.preventDefault(); // 判斷向左移動(dòng)的距離是否大于二分之一 let deltaX = event.deltaX; if (deltaX < 0) { if (deltaX <= -this.wd / 2) { // 向左滑動(dòng)超過(guò)二分之一 this.swipe = "transform:translateX(" + -this.wd + "px)"; this.swipeWd = -this.wd; } else { this.swipe = "transform:translateX(0px)"; this.swipeWd = 0; } } else { if (this.swipeWd < 0 && deltaX >= this.wd / 2) { // 向左滑動(dòng)超過(guò)二分之一 this.swipe = "transform:translateX(0px)"; this.swipeWd = 0; } else { this.swipe = "transform:translateX(" + this.swipeWd + "px)"; } } } }, }; </script>
style
我只貼出了上面代碼的css樣式,根據(jù)需求自行刪減吧,有需要的留著,不需要的刪除,需要改變的自行修改
.wrap { width: 100%; height: 100%; overflow: hidden; } .item { padding-left: 40px; height: 120px; background: #ffffff; align-items: center; flex-direction: inherit; .left-img { width: 120px; height: 100px; overflow: hidden; img { min-width: 120px; height: 100px; } } } .url { width: 400px; padding: 10px 30px 0; box-sizing: border-box; word-wrap: break-word; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .city { text-align: center; min-width: 100px; } .item-p { color: #333333; font-size: 22px; } .nothave { color: #999999; } .hint { height: 40px; align-items: center; margin-bottom: 30px; } .line { width: 250px; height: 1px; background: #999999; opacity: 0.5; } .item { width: 120%; // 超過(guò)100% transition: 0.1s ease 0s; // 過(guò)渡效果 } .edit-line { width: 2px; height: 80px; background: rgba(255, 255, 255, 1); } .edit-delete { width: 160px; height: 100%; background: rgba(255, 126, 34, 1); opacity: 0.8; align-items: center; } .edit, .ad-delete { img { width: 42px; height: 42px; } } .add-btn { width: 200px; height: 80px; background: rgba(255, 126, 34, 1); box-shadow: 0px 0px 5px 0px rgba(221, 221, 236, 1); border-radius: 40px; text-align: center; line-height: 80px; color: #ffffff; font-size: 30px; position: fixed; bottom: 8%; left: 50%; transform: translateX(-50%); }
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
看完上述內(nèi)容,你們掌握使用vue怎么實(shí)現(xiàn)左滑編輯與刪除的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。