apicloud apicloud

注册
查看: 7511|回复: 21

[模块教程] 仿uilistview的侧滑效果

转正司机

UID:22430

主题:
27
帖子:
549
云币:
3971

我李白贼6APICloud粉丝连续签到100天一周年中秋节社会摇圣诞节老司机你吃屎!托马斯全旋女朋友单身狗

[模块教程] 仿uilistview的侧滑效果

7511 21 | 发表于 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">&nbsp;</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);


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

主题:
1
帖子:
69
云币:
104
发表于 2015-9-25 11:32:14 |
那个前端模板可能有些会不了解,http://www.cnblogs.com/kuikui/p/3505768.html,看这里doT.js详细介绍

马路杀手

UID:8992

主题:
20
帖子:
409
云币:
1210
发表于 2015-9-24 10:42:16 |
赞  

主题:
1102
帖子:
5131
云币:
2147214885

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-9-24 17:53:47 |
感谢分享

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-9-25 14:25:04 |
感谢分享

新手上路

UID:82742

主题:
5
帖子:
12
云币:
207

一周年APICloud粉丝

发表于 2015-10-6 16:43:20 |
看不懂啦--!

转正司机

UID:22430

主题:
27
帖子:
549
云币:
3971

我李白贼6APICloud粉丝连续签到100天一周年中秋节社会摇圣诞节老司机你吃屎!托马斯全旋女朋友单身狗

 楼主| 发表于 2015-10-9 10:19:40 |

...... js引进去  添加监听即可

主题:
1
帖子:
21
云币:
64
发表于 2015-10-16 11:33:47 |
感谢分享,受教了!

主题:
73
帖子:
4727
云币:
1469

足球狗狗年旺旺旺APICloud粉丝连续签到100天APICloud毕业勋章APICloud骨灰粉模块开发者签到党土豪志愿者一周年中秋节社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人SB侠

发表于 2015-11-26 16:23:19 |
虽然不懂,不过好牛*的样子

主题:
2
帖子:
9
云币:
37
发表于 2015-11-27 15:32:38 |
不懂。真心不懂。
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表