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

 

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

     

原文地址:https://www.cnblogs.com/fangziffff123/p/6289922.html