纯前端侧滑删除列表，性能堪比原生,代码已更新

ForyouDev03

布局使用的是apicloud官方发布的aui框架，扫描二维码后的安装，之前发现许多人找

1.   apiready = function() {
   
2.                         initList();//初始化内容列表
   
3.                 };
   
4.                
   
5.                 var maxbtn_num = 3;        //列按钮最大数量
   
6.                 var openSwipers = [];//滑开的列
   
7.                
   
8.                 /**
   
9.                  * @brief                初始化内容列表
   
10.                  * @return                       
    
11.                  */                       
    
12.                 function initList()
    
13.                 {
    
14.                         var list_json = {};//请求获取到的json数据
    
15.                         var html = template('list_template', list_json);
    
16.                         $api.html($api.byId('list'), html);
    
17.                         //解析动态添加的元素tapmode属性，优化点击事件处理
    
18.                         api.parseTapmode();                       
    
19.                         initSwiper();//初始化滑块
    
20.                 }
    
21.                
    
22.                 /**
    
23.                  * @brief                初始化滑动
    
24.                  * @return                       
    
25.                  */               
    
26.                 function initSwiper()
    
27.                 {
    
28.                         for(var i = 0;i < maxbtn_num;i++)
    
29.                         {
    
30.                                 var sele = ".swiper-btn-" + (i + 1);
    
31.                                 var swiper = new Swiper(sele, {
    
32.                                         slidesPerView: 4,
    
33.                                         slidesPerGroup: i + 1,
    
34.                                         onTouchStart: function(swiper) {
    
35.                                                 if (openSwipers.length > 0) {
    
36.                                                         for(var s in openSwipers)
    
37.                                                         {       
    
38.                                                                 openSwipers[s].slideTo(0, 300, false);
    
39.                                                                 openSwipers.splice(s,1);
    
40.                                                         }
    
41.                                                 }
    
42.                                         },
    
43.                                         onSlideChangeStart: function(swiper) {
    
44.                                                 openSwipers.push(swiper);
    
45.                                         }
    
46.                                    });                               
    
47.                         }
    
48.                 }
    
49.                
    
50.                 /**
    
51.                  * @brief                删除按钮监听事件
    
52.                  * @param[in]        el对象        obj        被点击的按钮对象
    
53.                  * @return                       
    
54.                  */       
    
55.                 function onDelete(obj) {
    
56.                         $api.addCls($api.closest(obj, ".swiper-container"), "dele");
    
57.                         setTimeout(function() {
    
58.                                 $api.remove($api.closest(obj, ".swiper-container"));
    
59.                         }, 300)
    
60.                 }

复制代码

不到源码，还是把源码贴在下面把。更新代码解决了一部分问题

ForyouDev03

KazNet 发表于 2015-12-16 16:19
非常感谢， 解决了。但是现在 按第二个他不会恢复隐身第一个滑动的按钮

                        var open_swiper;
                       var swiper = new Swiper('.swiper-container', {
                    slidesPerView : 4,
                    slidesPerGroup : 1,
                    onTouchStart: function(swiper){
                            if(open_swiper)
                            {
                                    open_swiper.slideTo(0, 300, false);
                            }
                    },
                    onSlideChangeEnd:function(swiper){
                            open_swiper = swiper;
                    }
                });

碰到问题可以查一下https://community.apicloud.com/bbs/forum.php?mod=post&action=edit&fid=36&tid=19644&pid=110070&page=1这个API，然后自己想一下

代码钢铁侠

多谢楼主分享！笑纳了！~~

范成功

多谢楼主分享！笑纳了！~~,楼主牛X!

hackchen

不放上源码。。。。。。。

mashi

http://downloadpkg.apicloud.com/ ... .0.0&size=1.08M 扫完之后的地址。。

ForyouDev03

二维码地址可以下载测试包，测试包安装可以看效果，解压后可以找到源码

流风回雪

楼主，来的iOS版的试试

ForyouDev03

流风回雪 发表于 2015-12-12 09:32
楼主，来的iOS版的试试

ios版二维码上面也有，可以扫描安装

rivergreen

，感谢楼主分享！

左逸枫

源码呢，怎么没有啊，楼主