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

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

      个人想法突如其来,用wex5也设计一个这样的功能,能够吗?jquery

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

      呵呵。dom

一  效果演示:this

    

   左滑删除设计

    

   长按编辑3d

    

   取消复原视频

    

二 设计思路:blog

    利用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

 

 

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

相关文章
相关标签/搜索