wex5 實戰 蘋果左滑刪除與長按編輯

2022-07-17 20:45:12 字數 1468 閱讀 7198

用了多年蘋果,習慣了蘋果的左滑刪除與長按編輯,特別是簡訊什麼的,很多安卓介面也採用了類似方式。

我的想法突如其來,用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有機結合,**更簡結。

WeX5 單頁應用

例子參考ui2 portal sample index.w 要點 關於url 從 來看,x5中有兩種url格式,一種是內部的相對url,一種是標準的絕對url,如果使用x5提供的方法,兩種url都可以,如果要使用標準的html語法,需要轉成絕對的。相對url是ui2目錄下的路徑,在 中有兩種寫法 相...

WEX5 學習筆記(六)

靜態資料格式的資料 一般用 data 資料元件。而且data資料元件裡設定的列要跟 json靜態資料裡的列相同。data元件在重新整理資料的時候 有個事件 oncustomrefresh 接管重新整理事件會被觸發 所以我們在這裡將載入 的json資料載入到data當中就行。只要data的屬性 aut...

wex5 實現拖拽元素

現在很多地方都會用到拖拽和拖拽替換的功能,我做的乙個專案裡面就需要對元素進行拖拽替換。現在暫時只實現了拖拽,拖拽替換的會後續補上。看了示例裡面的touchjs,只有乙個元素的拖動,而且 比較複雜,要改的話,難度會比較大。所以先自己寫了乙個多元素拖動的 相容pc和手機 前台頁面處理 我資料庫用的是da...