整體(ti)思路(lu)：

 

 

進入分組(zu)管理(li)頁面-->點(dian)擊新建分組(zu)新建

 

 

進入到未分(fen)組頁面基(ji)本操(cao)作

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 理清完基(ji)本流程我(wo)們開始(shi)開發(fa)。首先整個布局(ju)可以先看(kan)下，我(wo)再(zai)一步(bu)步(bu)講(jiang)。

 

 

 

 

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

 

 

當然觸發它出現的是

 

 

 

 

顯示窗口

 

 

 

 

點擊取消消失

 

 

 

 

當里(li)面的(de)輸入框內容(rong)發(fa)生(sheng)改(gai)變時(shi) bindinput 事(shi)(shi)件，大家(jia)別(bie)使用(yong) bindchange 事(shi)(shi)件，這里(li)的(de) bindchange 事(shi)(shi)件只(zhi)有當失(shi)去焦點時(shi)才(cai)會被觸發(fa)。

 

 

 

 

當輸入框(kuang)事件(jian)發生時，確(que)定按(an)鈕(niu)會變成(cheng)可以點擊狀態，為空時，addTeam

 

 

 

 

樣(yang)式數(shu)據(ju)綁定。

 

 

 

 

里面有表單就使用了 from。

 

 

 

 

創建分組請求交互。

 

 

 

 

 創建分組完成(cheng)，這(zhe)里(li)可能很多疑問，為什(shen)么不使(shi)用微信提供的模(mo)態框(kuang)組件(jian)來實(shi)現，而(er)是自(zi)(zi)己實(shi)現，其實(shi)我也(ye)很懶，非(fei)常(chang)想使(shi)用自(zi)(zi)帶的模(mo)態框(kuang)組件(jian)，但是發現在(zai)模(mo)態框(kuang)里(li)面提交(jiao)表單好像(xiang)有點麻煩(fan)，直接自(zi)(zi)定義了。

 

 

接下(xia)來創(chuang)建好的分組支持(chi)左滑(hua)刪除(chu)與重命(ming)名(ming)，今天(tian)重點談(tan)下(xia)左滑(hua)刪除(chu)的實現方式(shi)。

 

 

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

 

 

左滑刪(shan)除使(shi)(shi)用(yong)(yong)了兩個事件 bindtouchstart 與(yu) bindtouchmove，這(zhe)(zhe)里必須(xu)綁定它(ta)的(de) id，這(zhe)(zhe)個 id 都是不(bu)同(tong)的(de)，我這(zhe)(zhe)使(shi)(shi)用(yong)(yong)的(de)用(yong)(yong)戶(hu)創建(jian)完成(cheng)后在(zai)后臺生成(cheng)的(de)一個 id 號，之后我再 block 出來使(shi)(shi)用(yong)(yong)在(zai)這(zhe)(zhe)里，這(zhe)(zhe)個 id 都是唯一的(de)，不(bu)能是相同(tong)的(de) id。

 

 

 

 

樣式布(bu)局，父元素是絕對定位(wei)(wei)，子元素刪除是相對定位(wei)(wei)，鑒(jian)于(yu)動畫(hua)效(xiao)果(guo)，我這(zhe)加了 css3 的動畫(hua)效(xiao)果(guo)，使(shi)滑動帶點動畫(hua)效(xiao)果(guo)。

 

 

 

 

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

 

 

Bindtap 點擊之后直接是(shi)跳轉頁面(mian)。

 

 

 

 

 

 

左(zuo)滑(hua)從觸摸事(shi)件開始，當然需(xu)使(shi)用(yong)的參數在(zai)外面最好先定義一下(xia)：

 

 

 

 

 

 

 

 

 bindtouchStart 發生(sheng)后，會執行 bindtouchmove 事(shi)件，在(zai)這里我(wo)們(men)可以判斷是否左右(you)滑動：

 

 

 

 

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

 

 

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

 

 

 

 

判斷到(dao)左滑(hua)(hua)與右滑(hua)(hua)事件后，我(wo)們就(jiu)需(xu)要對當前組(zu)(zu)件綁定數(shu)據了，數(shu)據從那里(li)來？可以看下(xia)我(wo)這數(shu)組(zu)(zu)一個來歷，以及怎么被左滑(hua)(hua)事件里(li)面(mian)獲取到(dao)（我(wo)這數(shu)據是一個數(shu)組(zu)(zu)，需(xu)要在 wxml 里(li)面(mian) block 的）。

 

 

 

 

這時候(hou)取到(dao)需(xu)要的數(shu)組(zu)，循環出來后(hou)，我(wo)(wo)進(jin)行對比(bi)，如(ru)果數(shu)據的 id== 當前被事件操(cao)作的 id，那么(me)我(wo)(wo)給改數(shu)組(zu)再添加一個 right 向(xiang)右偏(pian)移 15%，否則其他(ta)都不(bu)偏(pian)移，右滑同理(li)，直接(jie)全部設置為(wei) 0。

 

 

 

 

 

 

最后把數據到綁定到頁面(mian)上(shang)來。

 

 

 

 

OK，左滑效(xiao)果(guo)實現。

 

 

 

 

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

 

 

 

 

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

 

 

 

 

點擊(ji)刪除事件彈出模(mo)態框(kuang)供用戶確定是否(fou)刪除。

 

 

 

 

這里(li)你(ni)點(dian)擊取消時還(huan)要記得把左滑(hua)刪除按(an)鈕(niu)去(qu)掉可能用戶體(ti)驗會好點(dian)。

 

 

 

 

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

 

 

 

 

點擊未(wei)(wei)分組(zu)(zu)按鈕進入到未(wei)(wei)分組(zu)(zu)名(ming)片列表(biao)頁面。

 

 

 

 

這個布局完全是 copy 首(shou)頁(ye)過來的，后面只(zhi)是數(shu)據接口(kou)有變而已(yi)，大家有興趣可以(yi)回過去看下前面的。

 

 

點擊多選(xuan)(xuan)，會出現多選(xuan)(xuan)框和下面的(de)一些操作(zuo)按鈕。都(dou)是些數據綁定，顯示與隱藏(zang)類的(de)實(shi)現比較簡單。

 

 

 

 

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

 

 

 

 

 

 

選擇好名片(pian)后點擊設置(zhi)分(fen)組會彈出(chu)新建(jian)好的分(fen)組列表供(gong)用戶確(que)定設置(zhi)到那個分(fen)組里面(mian)（這里由于后臺接口方面(mian)還在完善，不繼(ji)續往下寫了）。

 

 

用戶已建分組(zu)點擊進去的是點擊頂(ding)部菜單按鈕出現(xian)下拉(la)菜單欄，這里(li)直(zhi)接(jie)使用微信提供的組(zu)件。

 

 

 

 

最后點擊從名片(pian)夾中添(tian)加進入到以下頁面(mian)：

 

 

 

 

整個(ge)布局基(ji)本還是和首頁面差(cha)不多，這(zhe)里(li)不再多講，

 

 

 

 

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

 

 

 

 

牽扯到表單類的基本全都是 from 表單提交事件。
除小部分接口方面(mian)欠(qian)缺外，寫到(dao)這(zhe)里其(qi)實分組前端(duan)方面(mian)效果基本實現。