整體(ti) 思路：

進入分組管理頁麵-->點擊新建分組新建

進入到未分組頁麵基本操作

進入到已建分組裏麵底部菜單欄操作-->從(cong) 名片夾中添加進行操作。

理清完基本流程我們(men) 開始開發。首先整個(ge) 布局可以先看下，我再一步步講。

靜態布號局後，我們(men) 開始實現新增分組效果，

當然觸發它出現的是

顯示窗口

點擊取消消失

當裏麵的輸入框內(nei) 容發生改變時 bindinput 事件，大家別使用 bindchange 事件，這裏的 bindchange 事件隻有當失去焦點時才會(hui) 被觸發。

當輸入框事件發生時，確定按鈕會(hui) 變成可以點擊狀態，為(wei) 空時，addTeam

樣式數據綁定。

裏麵有表單就使用了 from。

創建分組請求交互。

創建分組完成，這裏可能很多疑問，為(wei) 什麽(me) 不使用微信提供的模態框組件來實現，而是自己實現，其實我也很懶，非常想使用自帶的模態框組件，但是發現在模態框裏麵提交表單好像有點麻煩，直接自定義(yi) 了。

接下來創建好的分組支持左滑刪除與(yu) 重命名，今天重點談下左滑刪除的實現方式。

首先需要左滑的是被創建好的分組，未分組是寫(xie) 死的，故而不支持的。

左滑刪除使用了兩(liang) 個(ge) 事件 bindtouchstart 與(yu) bindtouchmove，這裏必須綁定它的 id，這個(ge) id 都是不同的，我這使用的用戶創建完成後在後台生成的一個(ge) id 號，之後我再 block 出來使用在這裏，這個(ge) id 都是唯一的，不能是相同的 id。

樣式布局，父元素是絕對定位，子元素刪除是相對定位，鑒於(yu) 動畫效果，我這加了 css3 的動畫效果，使滑動帶點動畫效果。

現在我們(men) 來看事件構成：

Bindtap 點擊之後直接是跳轉頁麵。

左滑從(cong) 觸摸事件開始，當然需使用的參數在外麵最好先定義(yi) 一下：

bindtouchStart 發生後，會(hui) 執行 bindtouchmove 事件，在這裏我們(men) 可以判斷是否左右滑動：

* Var dataId = e.currentTarget.id //獲取到前麵唯一的id；
If(key){ //用戶左滑距離很長時會(hui) 發生多次左滑事件，這裏定義(yi) 一個(ge) 開關(guan) 發生第一次之後就關(guan) 閉它；
* Touch是獲取觸摸點的一些數據，touches 是一個(ge) 觸摸點的數組，每個(ge) 觸摸點包括以下屬性：
* pageX,pageY：距離文檔左上角的距離，文檔的左上角為(wei) 原點 ，橫向為(wei) X 軸，縱向為(wei) Y 軸；
* clientX,clientY：距離頁麵可顯示區域（屏幕除去導航條）左上角距離，橫向為(wei) X軸，縱向為(wei) Y軸；
* screenX,screenY：距離屏幕左上角的距離，屏幕左上角為(wei) 原點，橫向為(wei) X軸，縱向為(wei) Y軸；

這裏使用 clientX,clientY 即可。
我們(men) 在 bindtouchstart 時記錄到開始的點，在 bindtouchmove 記錄到觸摸結束的點，如果 X 軸滑動大於(yu) Y 軸的，再如果結束點-開始點小於(yu) 一個(ge) 數值（這個(ge) 數組可以自己設置，鑒於(yu) 靈敏度，我這設置的很小），右滑也是同理。

判斷到左滑與(yu) 右滑事件後，我們(men) 就需要對當前組件綁定數據了，數據從(cong) 那裏來？可以看下我這數組一個(ge) 來曆，以及怎麽(me) 被左滑事件裏麵獲取到（我這數據是一個(ge) 數組，需要在 wxml 裏麵 block 的）。

這時候取到需要的數組，循環出來後，我進行對比，如果數據的 id== 當前被事件操作的 id，那麽(me) 我給改數組再添加一個(ge) right 向右偏移 15%，否則其他都不偏移，右滑同理，直接全部設置為(wei) 0。

最後把數據到綁定到頁麵上來。

OK，左滑效果實現。

如果出現全部被滾動了，記得在外層加上，X 軸關(guan) 閉即可。

這時候你點擊左滑會(hui) 出現點透效果，官方文檔提供給我們(men) 一個(ge) catch，不冒泡點擊事件，即可完美解決(jue) 。

點擊刪除事件彈出模態框供用戶確定是否刪除。

這裏你點擊取消時還要記得把左滑刪除按鈕去掉可能用戶體(ti) 驗會(hui) 好點。

一定記得在 data({
modalHidden:true
})
不然會(hui) 出現一加載頁麵即出現了模態框。

點擊未分組按鈕進入到未分組名片列表頁麵。

這個(ge) 布局完全是 copy 首頁過來的，後麵隻是數據接口有變而已，大家有興(xing) 趣可以回過去看下前麵的。

點擊多選，會(hui) 出現多選框和下麵的一些操作按鈕。都是些數據綁定，顯示與(yu) 隱藏類的實現比較簡單。

多選我們(men) 直接給 checked 設置 Boole 開關(guan) 。

選擇好名片後點擊設置分組會(hui) 彈出新建好的分組列表供用戶確定設置到那個(ge) 分組裏麵（這裏由於(yu) 後台接口方麵還在完善，不繼續往下寫(xie) 了）。

用戶已建分組點擊進去的是點擊頂部菜單按鈕出現下拉菜單欄，這裏直接使用微信提供的組件。

最後點擊從(cong) 名片夾中添加進入到以下頁麵：

整個(ge) 布局基本還是和首頁麵差不多，這裏不再多講，

頂部菜單直接多選綁定數據即可。

牽扯到表單類的基本全都是 from 表單提交事件。
除小部分接口方麵欠缺外，寫(xie) 到這裏其實分組前端方麵效果基本實現。