寫在前面
這個組件是之前開發(fā)中用到的机打，也是參考了網(wǎng)上的一些文件，現(xiàn)在整理發(fā)出來猿棉，有助于自己學(xué)習(xí)磅叛。畢竟當(dāng)時折騰了好久，好好整理一下萨赁。里邊的注釋自認(rèn)為還是挺齊全的宪躯，還有不理解的評論。
首先說一下該組件的注意事項
1位迂，提供左滑刪除功能
2访雪，滑動某一個時其他的不顯示刪除按鈕
3详瑞，點擊刪除按鈕后隱藏刪除（看情況）
4，垂直（上下）滑動超過30不觸發(fā)左滑功能
5臣缀，解決與上拉加載下拉刷新沖突問題
6坝橡，此組件適用于移動端
7,項目中是用的rem適配
具體是如何適配的，請移步前端開發(fā)公共css精置，js筆記
step一,首先在components下邊新建一個文件计寇，leftSlideDelete文件夾，里邊新建一個index.vue文件脂倦。
<template>
<div>
<div class="slider-item" data-type="0">
<div class="content"
@touchstart='touchStart'
@touchmove='touchMove'
@touchend='touchEnd'
:style="deleteSlider">
<!-- 插槽中放具體項目中需要內(nèi)容 -->
<slot></slot>
</div>
<div class="remove" ref='remove' @click.prevent="deleteItem(index)">
<img src="../../static/img/我的 未選中@2x.png" height="48" width="48"/>
<span>刪除我</span>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props: {
index: Number
},
data() {
return {
startX: 0, //觸摸位置
endX: 0, //結(jié)束位置
moveX: 0, //滑動時的位置
disX: 0, //移動距離
deleteSlider: '',//滑動時的效果,使用v-bind:style="deleteSlider"
lastIndex: "",
startY: 0, //觸摸位置
endY: 0, //結(jié)束位置
moveY: 0, //滑動時的位置
}
},
methods: {
touchStart(ev){
console.log("index:", this.index);
this.restSlide();
ev = ev || event
//tounches類數(shù)組番宁，等于1時表示此時有只有一只手指在觸摸屏幕
if (ev.touches.length == 1) {
// 記錄開始位置
this.startX = ev.touches[0].clientX;
this.startY = ev.touches[0].clientY;
}
},
touchMove(ev){
ev = ev || event;
let parentElement = ev.currentTarget.parentElement;
//獲取刪除按鈕的寬度，此寬度為滑塊左滑的最大距離
let wd = this.$refs.remove.offsetWidth;
if (ev.touches.length == 1) {
// 滑動時距離瀏覽器左側(cè)實時距離
this.moveY = ev.touches[0].clientY
this.moveX = ev.touches[0].clientX
if (Math.abs(this.moveY - this.startY) < 30) {
//起始位置減去 實時的滑動的距離赖阻，得到手指實時偏移距離
this.disX = this.startX - this.moveX;
// 如果是向右滑動或者不滑動蝶押，不改變滑塊的位置
if (this.disX < wd / 2 || this.disX == 0) {
this.deleteSlider = "transform:translateX(0px)";
parentElement.dataset.type = 0;
// 大于0，表示左滑了火欧，此時滑塊開始滑動
} else if (this.disX > wd / 2) {
//具體滑動距離我取的是 手指偏移距離*5棋电。
parentElement.dataset.type = 1;
this.deleteSlider = "transform:translateX(-" + this.disX + "px)";
// 最大也只能等于刪除按鈕寬度
if (this.disX*1.5 >= wd) {
parentElement.dataset.type = 1;
this.deleteSlider = "transform:translateX(-" + wd + "px)";
}
}
}
}
},
touchEnd(ev){
ev = ev || event;
let parentElement = ev.currentTarget.parentElement;
let wd = this.$refs.remove.offsetWidth;
if (ev.changedTouches.length == 1) {
let endY = ev.changedTouches[0].clientY;
if (Math.abs(this.startY - endY) < 30) {
let endX = ev.changedTouches[0].clientX;
this.disX = this.startX - endX;
console.log("touchEndthis.disX:", this.disX)
//如果距離小于刪除按鈕一半,強行回到起點
if (this.disX < (wd /2 )) {
parentElement.dataset.type = 0;
this.deleteSlider = "transform:translateX(0px)";
} else {
//大于一半 滑動到最大值
parentElement.dataset.type = 1;
this.deleteSlider = "transform:translateX(-" + wd + "px)";
}
console.log("touchEnd:dataset", parentElement.dataset.type);
}
}
},
restSlide(){
let listItems = document.querySelectorAll('.slider-item');
console.log(listItems);
// 復(fù)位
for (let i = 0; i < listItems.length; i++) {
listItems[i].firstChild.style = "transform:translateX(0" + "rem)";
}
},
deleteItem: function (index) {
this.$emit('deleteItem', index);
this.deleteSlider = "transform:translateX(0" + "rem)";
}
}
}
</script scoped>
<style>
.slider-item {
width: 100%;
position: relative;
user-select: none;
}
.content {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
transition: 0.6s;
}
.remove{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
width: 1rem;
height: 100%;
background: #F5F5F5;
right: 0;
top: 0;
color: #fff;
text-align: center;
font-size: .16rem;
}
.remove img{
width: .28rem;
height: .28rem;
}
.remove span{
display: block;
margin-top: .08rem;
color: #999;
font-size: .14rem;
}
</style>
然后是你要用的那個頁面在這里起名為example.vue吧
<div class="mainleftslide" v-for="(item,index) in mydata">
<leftSlider :index="1" @deleteItem="deleteItem(item,index)">
<div style="height: 1.16rem;width: 100%;background: blue">
{{item.text}}
</div>
</leftSlider>
</div>
<script>
import leftSlider from 'your path'
export default {
data() {
return {
}
},
components: {
leftSlider
},
methods:{
deleteItem(item,index){
console.log(item);
console.log(index);
//do something
// eg: you delete events
}
},
}
</script>
結(jié)束語
親測可已使用，有什么疑問的或者錯誤的評論區(qū)評論苇侵。謝謝赶盔。大家一起進(jìn)步。
