html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑刪除在移動(dòng)端是很常見的一種操作，常見于刪除購物車中的商品，刪除收藏夾中文章等等場景。我們只需要手指按住要?jiǎng)h除的對(duì)象，然后輕輕向左滑動(dòng)，便會(huì)出現(xiàn)刪除按鈕，然后點(diǎn)擊刪除按鈕即可刪除對(duì)象。
點(diǎn)擊下載源碼
今天我給大家介紹的移動(dòng)端左滑刪除效果是基于Vue2實(shí)現(xiàn)的，結(jié)合以電商平臺(tái)的刪除購物車商品為例，來看實(shí)現(xiàn)步驟。
準(zhǔn)備
安裝vue項(xiàng)目過程已忽略，如果不懂vue的同學(xué)可以上官網(wǎng)看下：https://cn.vuejs.org/v2/guide/installation.html#NPM
我們使用安裝一個(gè)webpack模板：
vue init webpack test
組件
我們創(chuàng)建一個(gè)左滑刪除組件，在src/components目錄下創(chuàng)建文件：deleteTemplate.vue，然后編寫模板代碼：
刪除
我們這個(gè)模板是一個(gè)要左滑刪除的列表項(xiàng)，綁定了手勢(shì)滑動(dòng)觸控動(dòng)作響應(yīng)，在其中加入了圖片、商品名稱和價(jià)格等內(nèi)容，以及一個(gè)刪除按鈕。
接下來，我們看組件中的js部分：
export default {
props: ['index'],
data() {
return {
startX: 0, //觸摸位置
endX: 0, //結(jié)束位置
moveX: 0, //滑動(dòng)時(shí)的位置
disX: 0, //移動(dòng)距離
deleteSlider: '',//滑動(dòng)時(shí)的效果,使用v-bind:style="deleteSlider"
}
},
methods:{
touchStart(ev){
ev = ev || event
//tounches類數(shù)組，等于1時(shí)表示此時(shí)有只有一只手指在觸摸屏幕
if(ev.touches.length == 1){
// 記錄開始位置
this.startX = ev.touches[0].clientX;
}
},
touchMove(ev){
ev = ev || event;
//獲取刪除按鈕的寬度，此寬度為滑塊左滑的最大距離
let wd = this.$refs.remove.offsetWidth;
if(ev.touches.length == 1) {
// 滑動(dòng)時(shí)距離瀏覽器左側(cè)實(shí)時(shí)距離
this.moveX = ev.touches[0].clientX
//起始位置減去 實(shí)時(shí)的滑動(dòng)的距離，得到手指實(shí)時(shí)偏移距離
this.disX = this.startX - this.moveX;
//console.log(this.disX)
// 如果是向右滑動(dòng)或者不滑動(dòng)，不改變滑塊的位置
if (this.disX < 0 || this.disX == 0) {
this.deleteSlider = "transform:translateX(0px)";
} else if (this.disX > 0) {// 大于0，表示左滑了，此時(shí)滑塊開始滑動(dòng)
//具體滑動(dòng)距離我取的是 手指偏移距離*5。
this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)";
// 最大也只能等于刪除按鈕寬度
if (this.disX*5 >= wd) {
this.deleteSlider = "transform:translateX(-" +wd+ "px)";
}
}
}
},
touchEnd(ev){
ev = ev || event;
let wd = this.$refs.remove.offsetWidth;
if (ev.changedTouches.length == 1) {
let endX = ev.changedTouches[0].clientX;
this.disX = this.startX - endX;
//console.log(this.disX)
//如果距離小于刪除按鈕一半,強(qiáng)行回到起點(diǎn)
if ((this.disX*5) < (wd/2)) {
this.deleteSlider = "transform:translateX(0px)";
}else{
//大于一半 滑動(dòng)到最大值
this.deleteSlider = "transform:translateX(-"+wd+ "px)";
}
}
},
deleteLine (){
this.deleteSlider = "transform:translateX(0px)";
this.$emit('deleteLine');
}
}
}
我們?cè)诖a中主要用到三個(gè)移動(dòng)端觸控事件：
touchstart : 手指放到屏幕上時(shí)觸發(fā)
touchmove : 手指在屏幕上滑動(dòng)式觸發(fā)
touchend ：手指離開屏幕時(shí)觸發(fā)
每個(gè)觸控事件被觸發(fā)后，會(huì)生成一個(gè)event對(duì)象，event對(duì)象里額外包括以下三個(gè)觸控列表
touches : 當(dāng)前屏幕上所有手指的列表
targetTouches : 當(dāng)前dom元素上手指的列表，盡量使用這個(gè)代替touches
changedTouches : 涉及當(dāng)前事件的手指的列表，盡量使用這個(gè)代替touches
這些列表里的每次觸控由touch對(duì)象組成，touch對(duì)象里包含著觸控信息，主要屬性如下：
clientX / clientY : 觸摸點(diǎn)相對(duì)瀏覽器窗口的位置
pageX / pageY : 觸摸點(diǎn)相對(duì)于頁面的位置
screenX / screenY : 觸摸點(diǎn)相對(duì)于屏幕的位置
在上述代碼中還可以看到，當(dāng)滑塊沒有超過刪除按鈕的一半時(shí)自動(dòng)回到起點(diǎn)位置。點(diǎn)擊刪除后調(diào)用deleteLine刪除當(dāng)前行。
組件調(diào)用
我們?cè)贖elloWorld.vue中建立模板，引入組件deleteSlider，代碼如下：
{{list.title}}
{{list.price}}
import deleteSlider from '@/components/deleteTemplate.vue'
export default {
components: {
deleteSlider
},
data () {
return {
dataList: [
{
id: 1,
img: 'static/a1.jpg',
title: '法國專柜2019夏季新款修身顯瘦氣質(zhì)包臀短裙鏤空蕾絲性感連衣裙子',
price: '399.00'
},
{
id: 2,
img: 'static/a2.jpg',
title: 'VERAMOON 亮片印花短袖連衣裙女夏甜美露背性感泡泡袖修身短裙',
price: '689.00'
},
{
id: 3,
img: 'static/a3.jpg',
title: 'famous 仙氣木耳邊紫色小碎花短裙a字雪紡連衣裙女',
price: '199.00'
},
{
id: 4,
img: 'static/a4.jpg',
title: '灰灰定制 2019春夏新款小香風(fēng)粗花呢連衣裙女法式名媛復(fù)古短裙M家',
price: '298.00'
}
]
}
},
methods:{
deleteLine (index, id){
console.log(id);
this.dataList.splice(index, 1)
}
}
}
注意實(shí)際應(yīng)用中數(shù)據(jù)源可用異步加載，在刪除的時(shí)候或許要異步請(qǐng)求后端來真正完成刪除操作。
總結(jié)
以上所述是小編給大家介紹的使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果附源碼,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
總結(jié)
以上是生活随笔為你收集整理的html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jq html 多一个引号,为什么jQu
- 下一篇： nodejs和Vue和Idea