效果展示:
主要是利用小程序的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)
},
简易版,欢迎各路大神交流~