效果展示:
主要是利用小程序的touchstart和touchmove事件。
思路:
用戶拖動item首先獲取到touchstart的位置e.touches[0].clientX,在拖動過程中觸發touchmove,獲取到var moveX = e.touches[0].clientX,在獲取兩值差this.startX - moveX;通過判斷差值(1、等於或小於零 2、大於零),第一種情況那就不顯示,第二種就把當前拖動的item的index存起來(這是拖動是否顯示對應item關鍵)。
微信小程序用的事wepy框架:
item組件:
html部分
<repeat for="{{list}}" key="index" index="index" item="item">
<view class="card-list zan-clearfix">
<view class="card-box flex-wrp" bindtouchstart="touchS({{index}})" bindtouchmove="touchM({{index}})" @tap="gotoDetail({{item.code}})" style="margin-left:{{currentIndex===index?'-100rpx':'0'}}">
<view class="card-item flex-item logo">
<image style="width: 60rpx;height:60rpx" mode="scaleToFill" src="../images/card_logo.png" />
</view>
<view class="card-item text">
<view class="zan-font-12 title">{{item.orgName ? item.orgName : ' '}}</view>
<text class="zan-font-22">{{item.code ? item.code : ' '}}</text>
</view>
<view class="card-item bg">
<image style="width: 160rpx; height:95rpx;display:block" src="../images/code_bg.png" />
</view>
</view>
<view class="dele-box" style="display:{{currentIndex===index?'block':'none'}}">
<view class="del flex-wrp"><view class="iconfont icon-shanchu" @tap="delEvent({{item.code}})"></view></view>
</view>
</view>
</repeat>
js:
methods = {
gotoDetail(code) {
this.$emit('goDetailEvent', code)
},
delEvent(e) {
this.$emit('delEvent', e)
},
touchS(i, e) {
this.$emit('touchS', i, e)
},
touchM(i, e) {
this.$emit('touchM', i, e)
}
}
list部分:
html:(調用item組件)
<card :list.sync="list" :currentIndex.sync="currentIndex" />
js:
events = {
touchS(i, e) {
console.log(i)
if (e.touches.length === 1) {
this.startX = e.touches[0].clientX
}
},
touchM(i, e) {
if (e.touches.length === 1) {
var moveX = e.touches[0].clientX
var disX = this.startX - moveX
console.log(disX)
if (disX === 0 || disX < 0) {
this.currentIndex = null
} else if (disX > 0) {
this.currentIndex = i
}
}
}
}
支付寶小程序:
item組件:
html:
<template name="comcard">
<view>
<block a:for="{{list}}" a:key="index" a:for-index="index" a:for-item="item" class="zan-panel">
<view class="card-list zan-clearfix">
<view class="card-box a-flex" data-code="{{item.code}}" data-index="{{index}}" onTap="gotoDetail" onTouchStart="touchS" onTouchMove="touchM" onTouchEnd="touchE" style="margin-left:{{currentIndex===index?'-100rpx':'0'}}">
<view class="card-item flex-item logo">
<image style="width: 60rpx;height:60rpx" mode="scaleToFill" src="../../../images/card_logo.png" />
</view>
<view class="card-item text">
<view class="zan-font-12 title">{{item.orgName ? item.orgName : ' '}}</view>
<text class="zan-font-22">{{item.code ? item.code : ' '}}</text>
</view>
<view class="card-item bg">
<image style="width: 160rpx; height:95rpx;display:block" src="../../../images/code_bg.png" />
</view>
</view>
<view class="dele-box" style="display:{{currentIndex===index?'block':'none'}}">
<view class="del a-flex"><view class="iconfont icon-shanchu" data-code="{{item.code}}" onTap="delEvent"></view></view>
</view>
</view>
</block>
</view>
</template>
list頁面:
html:
<import src="/page/component/com-card/com-card.axml"/>
<template is="comcard" data="{{...allData,currentIndex:currentIndex}}"/>
js:
touchS(e) {
console.log(e)
if(e.touches.length==1){
this.setData({
startX:e.touches[0].clientX
})
}
},
touchM(e) {
let _index = e.target.dataset.index
if(e.touches.length==1){
var moveX = e.touches[0].clientX
var disX = this.data.startX - moveX;
if(disX == 0 || disX < 0){
this.setData({
currentIndex: null
})
}else if(disX > 0 ){
this.setData({
currentIndex: _index
})
}
}
},
// 解綁卡
delEvent(e){
let _code = e.target.dataset.code
console.log(e)
},
簡易版,歡迎各路大神交流~