关键js代码如下：
-
//关闭所有列表的的active
-
closeLeftActive : function(sendUserId){
-
var front__lists = this.data.front__lists,
-
lists = this.data.lists,
-
result;
-
const fllen = front__lists.length,
-
llen = lists.length;
-
-
for(var i = 0; i < fllen; i++){
-
front__lists[i]['isMoveLeft'] = false;
-
front__lists[i]['moveLeftX'] = 0;
-
if(sendUserId && sendUserId == front__lists[i]['sendUserId']){
-
this.touchElement = {
-
t : 'front__lists',
-
i : i
-
}
-
}
-
}
-
for(var i = 0; i < llen; i++){
-
lists[i]['isMoveLeft'] = false;
-
lists[i]['moveLeftX'] = 0;
-
if(sendUserId && sendUserId == lists[i]['sendUserId']){
-
this.touchElement = {
-
t : 'lists',
-
i : i
-
}
-
}
-
}
-
this.setData({
-
front__lists : front__lists,
-
lists : lists
-
});
-
},
-
moveX : 0,//全局点击按下时的X坐标
-
touchElement : {},//当前点击的列表元素
-
isRedirect : true,//是否松开时跳转，默认如果滑动未超过10像素，跳转至详情页
-
//点击按下时
-
listtouchStart : function(e){
-
this.moveX = e.changedTouches[0].clientX;//获取当前点击按下时的的X坐标
-
const senduserid = e.currentTarget.dataset.senduserid;//获取当前列表元素的ID
-
this.closeLeftActive(senduserid);//关闭所有元素的滑动样式，并且获取到当前点击的元素在this.data中的位置
-
this.isRedirect = true;//点击默认改成能跳转
-
},
-
//点击移动时
-
listtouchMove : function(e){
-
const moveX = e.changedTouches[0].clientX;//获取移动到新位置时的坐标
-
var mx = this.moveX - moveX;//计算得到与按下时的X坐标移动多少像素
-
if(mx > 10){//如果像素大于10像素
-
this.isRedirect = false;//则不跳转
-
/**将新的位置赋值到全局data渲染页面， */
-
this.setData((function(ele,val,bool){
-
var obj = {};
-
obj[ele+'moveLeftX'] = val;//左移的值
-
obj[ele+'isMoveLeft'] = bool;//控制是否超过40像素，则直接添加active样式类
-
return obj;
-
})(this.touchElement.t + '[' + this.touchElement.i +']', mx, (mx >= 40)));
-
}else if(mx < 0){//如果是右滑，也不跳转
-
this.isRedirect = false;
-
}
-
-
},
-
//点击松开时
-
listtouchEnd : function(e){
-
if(this.isRedirect){//如果能跳转则跳转至新的详情页面
-
const senduserid = e.currentTarget.dataset.senduserid;//获取参数
-
wx.navigateTo({
-
url: 'dialog?sendUserId=' + senduserid
-
});
-
this.closeLeftActive();//初始化关闭所有打开的滑动效果
-
return;
-
}
-
const moveX = e.changedTouches[0].clientX;
-
var mx = this.moveX - moveX;
-
if(mx < 40){//如果松开时位移小于40像素则回弹关闭
-
this.closeLeftActive();
-
}
-
},
-
//点击被取消时，如中途来电话了等，初始化关闭所有打开的滑动效果
-
listtouchcancel : function(e){
-
this.closeLeftActive();
-
}
页面wxml文档
-
<view class="lists">
-
<view class="contain">
-
<block wx:for="{{lists}}" wx:key="{{item.sendUserId}}">
-
<view class="list">
-
<view class="list__content{{item.isMoveLeft ? ' active' : ''}}" style="left:-{{item.moveLeftX}}px;right:{{item.moveLeftX}}px;" data-sendUserId="{{item.sendUserId}}" catchtouchstart="listtouchStart" catchtouchend="listtouchEnd" catchtouchcancel="listtouchcancel" catchtouchmove="listtouchMove">
-
<view class="list__hd">
-
<image src="{{item.img}}"/>
-
<view class="list__msgnumber" wx:if="{{item.silence}}"></view>
-
<view wx:elif="{{item.msgNumber > 0}}" class="list__messagenumber">
-
<text hidden="{{item.silence}}" style="font-size:{{item.msgNumber > 99 ? '17' : '22'}}rpx;">{{item.msgNumber > 99 ? '99+' : item.msgNumber}}</text>
-
</view>
-
</view>
-
<view class="list__bd">
-
<view class="list__h3">
-
<text class="list__name{{item.isteam ? ' list__teamname' : ''}}">{{item.name}}</text>
-
<text class="list__sendtime">{{item.sendtime}}</text>
-
</view>
-
<view class="list__p{{item.silence ? ' silence' : ''}}">{{(item.silence && item.msgNumber > 0) ? '['+item.msgNumber +'条]' : ''}}{{item.desc}}</view><image wx:if="{{item.silence}}" class="list__silence" src="/image/silence.png"></image>
-
</view>
-
<view class="list__ft">
-
-
</view>
-
</view>
-
-
<view class="list__bg_btns">
-
<view class="list__bg_btn_gray">{{item.isteam ? '取消关注' : '标为已读'}}</view>
-
<view class="list__bg_btn_red">删除</view>
-
</view>
-
</view>
-
</block>
-
</view>
-
</view>
|
