|

侧滑效果 效果和js都在上面。
页面模板:
<script id="contactlistTemp" type="text/x-dot-template">
{{~it.result:userinfo:index}}
{{? userinfo.user.headPath.indexOf('http')<0?(userinfo.user.headPath='../'+userinfo.user.headPath):''}}
{{?}}
<li id='{{=userinfo.user.userId}}' class="w10 bgWhite60 bb p10 clearfix contactlist_rak" data-updateTime='{{=userinfo.updateTime}}' data-headpath='{{=userinfo.user.headPath}}' data-userId='{{=userinfo.user.userId}}' data-nickName='{{=userinfo.user.nickName}}'>
<div style="height:70px;line-height:70px;right:-85px;" class="bgRed cWhite plf10 pa top0" data-canlenClass="true" data-userid='{{=userinfo.user.userId}}'>取消关注</div>
<div class="fl pr">
<img class="bradius5" width="50" height="50" src='{{=userinfo.user.headPath}}' data-imgHammerClass="true" data-userid='{{=userinfo.user.userId}}' data-nickname='{{=userinfo.user.nickName}}'/>
{{? userinfo.user.roles==2 }}
<div class='pa right_5 bottom_5' data-urltype='2'><img width='17' src='../../icon/super.png'/></div>
{{?}}
</div>
<div class="fl w7 ml10 pr">
<div class="h3 cHigh mt10 mb5">{{=userinfo.user.nickName}}</div>
<div class="cSmall h4 pa top10 right_20"> </div>
<div class="tEllipsis h4 cBase" id='{{=userinfo.user.userId}}_info'>{{=userinfo.user.signature?userinfo.user.signature:''}}</div>
</div>
</li>
{{~}}
</script>
页面上监听代码:
//侧滑
var webDevBreak = {},canlencount=0;//防止重复弹框
webDevBreak.prepareForTouches = function(element) {
function dragElement(event) {
//right
if(event.gesture.deltaX>=85){
event.gesture.stopDetect();
event.currentTarget.style.left = 85 + 'px';
return;
}
if(event.gesture.deltaX<=-85){
event.gesture.stopDetect();
event.currentTarget.style.left = -85 + 'px';
return;
}
event.currentTarget.style.left = event.gesture.deltaX + 'px';
};
function deleteElement(event) {
var elementToDelete = event.currentTarget;
event.gesture.stopDetect();
elementToDelete.style.display = 'none';
};
function tapElement(event){
//跳转到主页
if(canlencount==0&&event.target.getAttribute("data-imgHammerClass")){
canlencount++;
event.gesture.stopPropagation();//停止传播
//openOtherHome(event.target);
return;
}
if(canlencount==0){
//跳转到聊天
canlencount++;
event.gesture.stopPropagation();//停止传播
//openChatWin(event.currentTarget);
}
}
function resetElement(event) {
if(event.target.getAttribute("data-canlenClass")){
event.gesture.stopDetect();
if(canlencount==0){
canlencount++;
event.gesture.stopPropagation();//停止传播
canlenContactOne(event.target,event.currentTarget);
}
return;
}
//event.currentTarget.style.left = 0;
animate(event.currentTarget,{left:0},250);
};
var swipeOptions = { dragLockToAxis: true, dragBlockHorizontal: true };
function initTouchListeners(touchableElement) {
var touchControl = new Hammer(touchableElement, swipeOptions);
touchControl.on("tap",tapElement)
.on("dragleft", dragElement)
.on("swipeleft", dragElement)
.on("release", resetElement);
};
initTouchListeners(element);
}
webDevBreak.prepareForTouchesWhenReady = function(data) {
for(var i=0;i<data.length;i++){
webDevBreak.prepareForTouches($api.byId(data.user.userId));
}
};
调用方法:webDevBreak.prepareForTouchesWhenReady(ret.result);
|
本帖子中包含更多资源 您需要 登录 才可以下载或查看,没有帐号?立即注册
x
评分
-
2
查看全部评分
-
|