wex5 实战 苹果左滑删除与长按编辑

      用了多年苹果，习惯了苹果的左滑删除与长按编辑，特别是短信什么的，很多安卓界面也采用了类似方式。

      我的想法突如其来，用wex5也设计一个这样的功能，可以吗？

      那句广告词，没有什么不可能。

      呵呵。

一  效果演示：

    

   左滑删除

    

   长按编辑

    

   取消复原

    

二 设计思路：

    利用jquery监听touch事件，结合wex5的事件，触发当前行数据操作与当前行dom对像的样式编辑

三  左滑删除  代码实现：

     1   为list中的当前行绑定touchStart 和 touchMove 事件

        

    2 touchStart 和 touchMove 事件与jquery事件套用 

            用wex5的touchstart事件，得到list中的 当前行数据与dom对像，为对像添加jquery的touch事件

        

            （注）当前行数据this.row = event.bindingContext.$object;

                     当前行dom对像 var rowCss = event.currentTarget;

   3  左滑删除

       

          删除当前行数据并刷新

四  长按编辑

      1 用row的列宽与buttongroud设置组件

        

     2  为当前行绑定mousedown事件

       

     3 css 样式

        

    4  长按变更样式，弹出按钮

 

    5   取消，恢复原状

       

 五 总结

     设计思路简单，把wex5与jquey有机结合，代码更简结。

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 扫描二维码，看高清教学视频。