|
wxml結(jié)構(gòu)（刪除部分代碼）：
<view class="chapter-item" wx:for="{{klgData}}" data-index="{{index}}" bind:touchstart="touchS" bind:touchmove="touchM" bind:touchend="touchE" wx:key="item.id"><!-- 主要代碼 -->
<view class="klg-content" style="{{item.contentStyle}}"><!-- 主要代碼 -->
<view class="left-side">
<image wx:if="{{item.image}}" mode="aspectFill" class="chapter-image" src="{{host+item.image}}" />
</view>
<view class="right-side">
<text class="chapter-text chapter-name">{{item.title}}</text>
<text class="chapter-text chapter-time">時長：{{item.duration}}</text>
</view>
</view>
<view class="operates" style="{{item.btnStyle}}"><!-- 主要代碼 -->
<view class="klg-btn returnBtn" catchtap="removeKlg">
<image mode="aspectFill" data-id="{{item._id}}" data-klgid="{{item.klgid}}" class="btn-icon" src="../../images/video_icon_value.png" />
撕書
</view>
<view class="klg-btn shareBtn"><image data-id="{{item.id}}" mode="aspectFill" class="btn-icon" src="../../images/video_point_icon_share.png" />分享</view>
</view>
</view>
wxss相關(guān)代碼（主要是定位，已標(biāo)識主要代碼）：
.chapter-item{
overflow:hidden;
border-bottom: 1px solid #eee;
position: relative;
height:80px;
display: flex;
}
.left-side,.right-side{
float:left;
display: inline-block;position:relative;height:58px;
}
.right-side{flex:1;}
.left-side{width:105px;padding-right:10px;flex:0 0 105px}
.chapter-name{flex:1;display:block;color:#2E3330;}
.chapter-time{display:block;position:absolute;bottom:0;left:0;}
.chapter-image{width:104px;height:58px;}
.chapter-text{display: block;}
.klg-content{position: absolute;left:12px;top:10px;}//主要代碼 絕對定位
.operates{position: absolute;top:0;overflow:hidden;z-index: 99;right:-160px;}//主要代碼 絕對定位
.klg-btn{color:#34BC67;width:80px;line-height: 60px; float: left;text-align: center;font-size: 16px;position: relative;padding-top:24px;}
.btn-icon{width:28px;height:28px;text-align: center;position: absolute;top:14px;left:25px;}
js相關(guān)代碼：
//這里delBtnWidth為160，存放在data里面
//手指剛放到屏幕觸發(fā)
touchS:function(e){
console.log("touchS"+e);
//判斷是否只有一個觸摸點(diǎn)
if(e.touches.length==1){
this.setData({
//記錄觸摸起始位置的X坐標(biāo)
startX:e.touches[0].clientX
});
}
},
//觸摸時觸發(fā)，手指在屏幕上每移動一次，觸發(fā)一次
touchM:function(e){
console.log("touchM:"+e);
var that = this
if(e.touches.length==1){
//記錄觸摸點(diǎn)位置的X坐標(biāo)
var moveX = e.touches[0].clientX;
//計(jì)算手指起始點(diǎn)的X坐標(biāo)與當(dāng)前觸摸點(diǎn)的X坐標(biāo)的差值
var disX = that.data.startX - moveX;
//delBtnWidth 為右側(cè)按鈕區(qū)域的寬度
var delBtnWidth = that.data.delBtnWidth;
var contentStyle = "";
var btnStyle="";
if(disX == 0 || disX < 0){//如果移動距離小于等于0，文本層位置不變
contentStyle = "left:12px";
btnStyle = "right:-160px";
}else if(disX > 0 ){//移動距離大于0，文本層left值等于手指移動距離
contentStyle = "left:-"+disX+"px";
btnStyle = "right:"+(-160+disX)+"px";
if(disX>=delBtnWidth){
//控制手指移動距離最大值為刪除按鈕的寬度
contentStyle = "left:-"+delBtnWidth+"px";
btnStyle = "right:0px";
}
}
//獲取手指觸摸的是哪一個item
var index = e.currentTarget.dataset.index;
var list = that.data.klgData;
//將拼接好的樣式設(shè)置到當(dāng)前item中
list[index].contentStyle = contentStyle;
list[index].btnStyle = btnStyle;
//更新列表的狀態(tài)
this.setData({
klgData:list
});
}
},
touchE:function(e){
console.log("touchE"+e);
var that = this
if(e.changedTouches.length==1){
//手指移動結(jié)束后觸摸點(diǎn)位置的X坐標(biāo)
var endX = e.changedTouches[0].clientX;
//觸摸開始與結(jié)束，手指移動的距離
var disX = that.data.startX - endX;
var delBtnWidth = that.data.delBtnWidth;
//如果距離小于按鈕的1/2，不顯示按鈕
var contentStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:12px";
var btnStyle = disX > delBtnWidth/2 ? "right:0px":"right:-160px";
//獲取手指觸摸的是哪一項(xiàng)
var index = e.currentTarget.dataset.index;
var list = that.data.klgData;
list[index].contentStyle = contentStyle;
list[index].btnStyle = btnStyle;
//更新列表的狀態(tài)
that.setData({
klgData:list
});
}
}
結(jié)果：
|
