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

 

 

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