仿uilistview的侧滑效果

zjjay · 发表于 2015-9-24 10:34:53

侧滑效果  效果和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);