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

靜態布號局后，我們開始實現新增分組效果，當然觸發它出現的是

顯示窗口

點擊取消消失

當里面的輸入框內容發生改變時 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 軸；

• screenX,screenY：距離屏幕左上角的距離，屏幕左上角為原點，橫向為X軸，縱向為Y軸；
  這里使用 clientX,clientY 即可。
  我們在 bindtouchstart 時記錄到開始的點，在 bindtouchmove 記錄到觸摸結束的點，如果 X 軸滑動大于 Y 軸的，再如果結束點-開始點小于一個數值（這個數組可以自己設置，鑒于靈敏度，我這設置的很�。�，右滑也是同理。
  

  
  

  
  

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

  
  

  
  

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

  
  

  
  

  
  

  
  

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

  
  

  
  

  
  OK，左滑效果實現。
  

  
  

  
  

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

  
  

  
  

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

  
  

  
  

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

  
  

  
  

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

  
  

  
  

  
  這里表單提交數據轉換有點復雜（大家根據業務需求來做，不必花時間研究這里的方法），獲取的是數組，按照后臺需要的數據格式進行轉換傳遞過去。
  

  
  

  
  

  
  今天再回去理下首頁 A、B、C 定點跳轉功能實現方法。
  

  
  

  
  

  
  首先是右邊小索引布局以及數據綁定，數據綁定和名片夾列表上的字母一樣，該字母下面有名片則渲染出來，沒有則不需要渲染，id同樣是當前字母與右邊顯示的內容一樣：
  

  
  

  
  

  
  數據 sort，和 group.name 數據一樣：
  

  
  

  
  

  
  這里是因為 # 不支持設為 id（就是 id=”#”），故而進行了一個轉化。
  

  
  

  
  

  
  點擊事件：獲取到當前 ID，以及綁定數據 toView 為當前 ID。
  

  
  

  
  

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

  
  

  
  

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

  
  

  
  

  
  這個布局完全是 copy 首頁過來的，后面只是數據接口有變而已，大家有興趣可以回過去看下前面的。
  點擊多選，會出現多選框和下面的一些操作按鈕。都是些數據綁定，顯示與隱藏類的實現比較簡單。
  

  
  

  
  

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

  
  

  
  

  
  

  
  

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

  
  

  
  

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

  
  

  
  

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

  
  

  
  

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

  
  

  
  

  
  牽扯到表單類的基本全都是 from 表單提交事件。
  除小部分接口方面欠缺外，寫到這里其實分組前端方面效果基本實現。
  好了，由于目前小程序開發工具圖片上傳還有點問題，拍照收納無法實現，所以微信小程序開發教程也先暫告一段落，等開發工具更新穩定后，我還會再追加教程的內容，有機會的話把成品也給大家看看。
  感謝朋友們一直以來的支持和關心，大家可以拿這個教程作為參考，摸索出自己的小程序開發套路。
  

【相關推薦】

1. 微信小程序完整源碼下載

2. 微信小程序游戲類demo挑選不同色塊

3. 微信小程序學習用demo推薦：聊天室+音視頻+添加內容+

以上就是微信小程序開發（二）實現分組開發與左滑功能的詳細內容，更多請關注php中文網其它相關文章！