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：[phone],qq:1017945251

 

 

 掃描二維碼，看高清教學視頻。