用touch的demo 出现问题

moses_wang

使用向右滑动删除会出现删除按钮没有被隐藏，直接显示在界面上。
场景：
使用夜神安卓模拟器，打包不采用增强型浏览器。浏览器模拟运行正常

zhaixin

发一下相关代码

moses_wang

zhaixin 发表于 2015-9-29 11:38
发一下相关代码

用的就是3.2.1里的demo运行
demo地址model\UI2\system\components\justep\touch\demo\touchjs\mainActivity.w，第四个content。滑动删除

moses_wang

zhaixin 发表于 2015-9-29 11:38
发一下相关代码

主要代码部分

1. <div class="x-contents-content" xid="newsContent">
   
2.           <div class="x-scroll" component="$UI/system/components/justep/scrollView/scrollView"
   
3.             xid="demoList">
   
4.             <div class="x-content-center x-pull-down container" xid="div15">
   
5.               <i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i7"/>  
   
6.               <span class="x-pull-down-label" xid="span6">下拉刷新...</span>
   
7.             </div>  
   
8.             <div class="x-scroll-content" xid="div14">
   
9.               <div xid="newsList" class="x-list" component="$UI/system/components/justep/list/list"
   
10.                 data="newsData" limit="8">
    
11.                 <ul class="x-list-template" style="padding-top:6px;" xid="listTemplateUl1">
    
12.                   <li class="media" style="padding-left:6px; padding-right:6px;overflow:visible;position:relative;display:block;"
    
13.                     xid="li1">
    
14.                     <div style="overflow:hidden;" xid="div21">
    
15.                       <div class="x-blob x-blob-radius pull-left media-object x-news-image"
    
16.                         xid="div16">
    
17.                         <img class="x-blob-img x-autofill" bind-attr-src="$model.getImageUrl($object)"
    
18.                           xid="image4"/>
    
19.                       </div>  
    
20.                       <div class="media-body" xid="div17">
    
21.                         <h4 class="media-heading" bind-text="ref('fTitle')"
    
22.                           xid="h41"/>  
    
23.                         <div bind-text="ref('fContent')" xid="div18"/>
    
24.                       </div>
    
25.                     </div>  
    
26.                     <div class="x-swipe-area" xid="div22">删除</div>
    
27.                   </li>
    
28.                 </ul>
    
29.               </div>
    
30.             </div>  
    
31.             <div class="x-content-center x-pull-up" xid="div13">
    
32.               <span class="x-pull-up-label" xid="span7">加载更多...</span>
    
33.             </div>
    
34.           </div>
    
35.         </div>

复制代码

liangyongfei

这个需要使用代码控制隐藏，滑动的时候再显示出来！

moses_wang

liangyongfei 发表于 2015-9-29 16:47
这个需要使用代码控制隐藏，滑动的时候再显示出来！

怎么实现呢，我试试了还是会显示原来的行上，不是空白区。另外，因为是同一个ID，所以，显示和隐藏就会有冲突，第二个就不显示了。。。Model.prototype.swipeDelete = function() {
                var briefMsgContentID = this.getIDByXID('briefMsgContent');
                var swipeAreaSize = 100;
                var dx;
                var deleteRowDivId = this.getIDByXID('deleteRowDiv');
                touch.on('#' + briefMsgContentID, 'touchstart', function(ev) {
                        ev.preventDefault();
                        var $swipNode = $('#' + briefMsgContentID + " li").has(ev.target);
                        dx = parseInt($swipNode.attr('swipeX') || "0");
                });

                touch.on('#' + briefMsgContentID, 'drag', function(ev) {
                        var $swipNode = $('#' + briefMsgContentID + " li").has(ev.target);
                        if (ev.direction === "left" || ev.direction === "right") {
                                dx = dx || 0;
                                var offx = dx + ev.x;
                                if (offx < swipeAreaSize * -1) {
                                        offx = swipeAreaSize * -1;
                                }
                                if (offx > 0) {
                                        offx = 0;
                                }
                                if (ev.direction === "right" && $swipNode.hasClass('x-swipe-out')) {
                                        $swipNode.css({
                                                'transform' : 'translate3d(' + offx + 'px,0,0)'
                                        });
                                } else if (ev.direction === "left" && (!$swipNode.hasClass('x-swipe-out'))) {
                                        $swipNode.css({
                                                'transform' : 'translate3d(' + offx + 'px,0,0)'
                                        });
                                }
                        }
                });
                touch.on('#' + briefMsgContentID, 'dragend', function(ev) {
                        var $swipNode = $('#' + briefMsgContentID + " li").has(ev.target);
                        if (ev.direction === "left") {
                                $('#' + deleteRowDivId).show();
                                $swipNode.css({
                                        'transform' : 'translate3d(-' + swipeAreaSize + 'px,0,0)'
                                });
                                $swipNode.addClass('x-swipe-out');
                                dx = swipeAreaSize * -1;
                        } else if (ev.direction === "right") {
                                $('#' + deleteRowDivId).hide();
                                $swipNode.removeClass('x-swipe-out');
                                $swipNode.css({
                                        'transform' : 'translate3d(0,0,0)'
                                });
                                dx = 0;
                        }
                        $swipNode.attr('swipeX', dx);
                });
        };

moses_wang

moses_wang 发表于 2015-9-29 17:42
怎么实现呢，我试试了还是会显示原来的行上，不是空白区。另外，因为是同一个ID，所以，显示和隐藏就会有 ...

请大神门帮忙看看呢，怎么解决

liangyongfei

moses_wang 发表于 2015-9-29 23:53
请大神门帮忙看看呢，怎么解决

不要使用id，可以使用name！这样返回的就是个数组了！根据当前行数据可知道数组的索引！

moses_wang

liangyongfei 发表于 2015-9-30 09:05
不要使用id，可以使用name！这样返回的就是个数组了！根据当前行数据可知道数组的索引！ ...

恩，这样可以，但是我滑动的时候，红色方块不是出现在多出的白色区域，而是在原来的DIV上附加的，这个有什么好的方法吗

zhaixin

在小米手机上测试，确实有这个问题
我们已提交到产品组(内部编号：2015093000011)，感谢楼主的支持与配合。