鈦媒體注：鈦媒體作者博卡君對于“應用號的最終形態”與“怎樣將一個「服務號」改造成為「小程序」”的話題上，有著自己的獨特的理解。他想要用第三方工具的實例，來演示開發過程。今天，他為我們帶來《微信小程序編輯名片頁面開發》的內容。感興趣的朋友，也不要錯過此前鈦媒體發布的第一彈、第二彈和第三彈、第四彈中的精彩內容。

第八章：微信小程序分組開發與左滑功能實現

先來看看今天的整體思路：

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

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

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

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

靜態布號局后，我們開始實現新增分組效果，

當然觸發它出現的是

顯示窗口

點擊取消消失

當里面的輸入框內容發生改變時 bindinput 事件，大家別使用 bindchange 事件，這里的 bindchange 事件只有當失去焦點時才會被觸發。

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

樣式數據綁定。

里面有表單就使用了 from。

創建分組請求交互。

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

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

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

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

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

現在我們來看事件構成：

Bindtap 點擊之后直接是跳轉頁面。

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

bindtouchStart 發生后，會執行 bindtouchmove 事件，在這里我們可以判斷是否左右滑動：

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

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

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

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

最后把數據到綁定到頁面上來。

OK，左滑效果實現。

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

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

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

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

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

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

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

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

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

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

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

最后點擊從名片夾中添加進入到以下頁面：

整個布局基本還是和首頁面差不多，這里不再多講，

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

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

好了，由于目前小程序開發工具圖片上傳還有點問題，拍照收納無法實現，所以博卡君的微信小程序開發教程也先暫告一段落，等開發工具更新穩定后，我還會再追加教程的內容，有機會的話把成品也給大家看看。

感謝朋友們一直以來的支持和關心，大家可以拿這個教程作為參考，摸索出自己的小程序開發套路。我最近還會在論壇、微信公眾號里收集一下大家的留言和問題，統一給大家一些回復。大家多多在咱們的 QQ 群內交流吧，群里每天都會有很多朋友交換代碼、答疑解惑，對大家的開發和學習很有幫助。

更多商業新知，關注鈦媒體微信號：鈦媒體（ID：taimeiti）

鈦媒體微信二維碼

?