系列教程：
玩轉(zhuǎn)微信小程序（一）怎樣將「服務(wù)號(hào)」改造成「小程序」？玩轉(zhuǎn)微信小程序（二）微信小程序項(xiàng)目結(jié)構(gòu)及配置玩轉(zhuǎn)微信小程序（三）微信小程序名片夾詳情頁(yè)開(kāi)發(fā)玩轉(zhuǎn)微信小程序（四）名片盒「我」的頁(yè)面詳解玩轉(zhuǎn)微信小程序（五）「編輯名片」頁(yè)面開(kāi)發(fā)玩轉(zhuǎn)微信小程序（六）教你實(shí)現(xiàn)分組開(kāi)發(fā)與左滑功能先來(lái)看看今天的整體思路：
進(jìn)入分組管理頁(yè)面-->點(diǎn)擊新建分組新建
進(jìn)入到未分組頁(yè)面基本操作
進(jìn)入到已建分組里面底部菜單欄操作-->從名片夾中添加進(jìn)行操作漩怎。
理清完基本流程我們開(kāi)始開(kāi)發(fā)趣竣。首先整個(gè)布局可以先看下，我再一步步講胆剧。
靜態(tài)布號(hào)局后絮姆，我們開(kāi)始實(shí)現(xiàn)新增分組效果，當(dāng)然觸發(fā)它出現(xiàn)的是
顯示窗口
點(diǎn)擊取消消失
當(dāng)里面的輸入框內(nèi)容發(fā)生改變時(shí) bindinput 事件秩霍，大家別使用 bindchange 事件篙悯，這里的 bindchange 事件只有當(dāng)失去焦點(diǎn)時(shí)才會(huì)被觸發(fā)。
當(dāng)輸入框事件發(fā)生時(shí)铃绒，確定按鈕會(huì)變成可以點(diǎn)擊狀態(tài)鸽照，為空時(shí)，addTeam
樣式數(shù)據(jù)綁定颠悬。
里面有表單就使用了 from矮燎。
創(chuàng)建分組請(qǐng)求交互定血。
創(chuàng)建分組完成，這里可能很多疑問(wèn)诞外，為什么不使用微信提供的模態(tài)框組件來(lái)實(shí)現(xiàn)澜沟，而是自己實(shí)現(xiàn)，其實(shí)我也很懶峡谊，非常想使用自帶的模態(tài)框組件茫虽，但是發(fā)現(xiàn)在模態(tài)框里面提交表單好像有點(diǎn)麻煩，直接自定義了靖苇。
接下來(lái)創(chuàng)建好的分組支持左滑刪除與重命名席噩，今天重點(diǎn)談下左滑刪除的實(shí)現(xiàn)方式。首先需要左滑的是被創(chuàng)建好的分組贤壁，未分組是寫(xiě)死的悼枢，故而不支持的。
左滑刪除使用了兩個(gè)事件 bindtouchstart 與 bindtouchmove脾拆，這里必須綁定它的 id馒索，這個(gè) id 都是不同的，我這使用的用戶(hù)創(chuàng)建完成后在后臺(tái)生成的一個(gè) id 號(hào)名船，之后我再 block 出來(lái)使用在這里绰上，這個(gè) id 都是唯一的，不能是相同的 id渠驼。
樣式布局蜈块，父元素是絕對(duì)定位，子元素刪除是相對(duì)定位迷扇，鑒于動(dòng)畫(huà)效果百揭，我這加了 css3 的動(dòng)畫(huà)效果，使滑動(dòng)帶點(diǎn)動(dòng)畫(huà)效果蜓席。
現(xiàn)在我們來(lái)看事件構(gòu)成：Bindtap 點(diǎn)擊之后直接是跳轉(zhuǎn)頁(yè)面器一。
左滑從觸摸事件開(kāi)始，當(dāng)然需使用的參數(shù)在外面最好先定義一下：
bindtouchStart 發(fā)生后厨内，會(huì)執(zhí)行 bindtouchmove 事件祈秕，在這里我們可以判斷是否左右滑動(dòng)：
- Var dataId = e.currentTarget.id //獲取到前面唯一的id；
If(key){ //用戶(hù)左滑距離很長(zhǎng)時(shí)會(huì)發(fā)生多次左滑事件雏胃，這里定義一個(gè)開(kāi)關(guān)發(fā)生第一次之后就關(guān)閉它请毛； - Touch是獲取觸摸點(diǎn)的一些數(shù)據(jù)，touches 是一個(gè)觸摸點(diǎn)的數(shù)組瞭亮，每個(gè)觸摸點(diǎn)包括以下屬性：
- pageX,pageY：距離文檔左上角的距離获印，文檔的左上角為原點(diǎn) ，橫向?yàn)?X 軸，縱向?yàn)?Y 軸兼丰；
- screenX,screenY：距離屏幕左上角的距離，屏幕左上角為原點(diǎn)唆缴，橫向?yàn)閄軸鳍征，縱向?yàn)閅軸；
這里使用 clientX,clientY 即可面徽。
我們?cè)?bindtouchstart 時(shí)記錄到開(kāi)始的點(diǎn)艳丛，在 bindtouchmove 記錄到觸摸結(jié)束的點(diǎn)，如果 X 軸滑動(dòng)大于 Y 軸的趟紊，再如果結(jié)束點(diǎn)-開(kāi)始點(diǎn)小于一個(gè)數(shù)值（這個(gè)數(shù)組可以自己設(shè)置氮双，鑒于靈敏度，我這設(shè)置的很婿佟）戴差，右滑也是同理。
判斷到左滑與右滑事件后铛嘱，我們就需要對(duì)當(dāng)前組件綁定數(shù)據(jù)了暖释，數(shù)據(jù)從那里來(lái)？可以看下我這數(shù)組一個(gè)來(lái)歷墨吓，以及怎么被左滑事件里面獲取到（我這數(shù)據(jù)是一個(gè)數(shù)組球匕，需要在 wxml 里面 block 的）。
這時(shí)候取到需要的數(shù)組帖烘，循環(huán)出來(lái)后亮曹，我進(jìn)行對(duì)比，如果數(shù)據(jù)的 id== 當(dāng)前被事件操作的 id秘症，那么我給改數(shù)組再添加一個(gè) right 向右偏移 15%照卦，否則其他都不偏移，右滑同理历极，直接全部設(shè)置為 0窄瘟。
最后把數(shù)據(jù)到綁定到頁(yè)面上來(lái)。
OK趟卸，左滑效果實(shí)現(xiàn)蹄葱。
如果出現(xiàn)全部被滾動(dòng)了，記得在外層加上锄列，X 軸關(guān)閉即可图云。
這時(shí)候你點(diǎn)擊左滑會(huì)出現(xiàn)點(diǎn)透效果，官方文檔提供給我們一個(gè) catch邻邮，不冒泡點(diǎn)擊事件竣况，即可完美解決。
點(diǎn)擊刪除事件彈出模態(tài)框供用戶(hù)確定是否刪除筒严。
這里你點(diǎn)擊取消時(shí)還要記得把左滑刪除按鈕去掉可能用戶(hù)體驗(yàn)會(huì)好點(diǎn)丹泉。
這里表單提交數(shù)據(jù)轉(zhuǎn)換有點(diǎn)復(fù)雜（大家根據(jù)業(yè)務(wù)需求來(lái)做情萤，不必花時(shí)間研究這里的方法），獲取的是數(shù)組摹恨，按照后臺(tái)需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換傳遞過(guò)去筋岛。
今天再回去理下首頁(yè) A、B晒哄、C 定點(diǎn)跳轉(zhuǎn)功能實(shí)現(xiàn)方法睁宰。
首先是右邊小索引布局以及數(shù)據(jù)綁定，數(shù)據(jù)綁定和名片夾列表上的字母一樣寝凌，該字母下面有名片則渲染出來(lái)柒傻，沒(méi)有則不需要渲染，id同樣是當(dāng)前字母與右邊顯示的內(nèi)容一樣：
數(shù)據(jù) sort较木，和 group.name 數(shù)據(jù)一樣：
這里是因?yàn)?# 不支持設(shè)為 id（就是 id=”#”）红符，故而進(jìn)行了一個(gè)轉(zhuǎn)化。
點(diǎn)擊事件：獲取到當(dāng)前 ID劫映，以及綁定數(shù)據(jù) toView 為當(dāng)前 ID违孝。
一定記得在
data({modalHidden:true})
不然會(huì)出現(xiàn)一加載頁(yè)面即出現(xiàn)了模態(tài)框。
點(diǎn)擊未分組按鈕進(jìn)入到未分組名片列表頁(yè)面泳赋。
這個(gè)布局完全是 copy 首頁(yè)過(guò)來(lái)的雌桑，后面只是數(shù)據(jù)接口有變而已，大家有興趣可以回過(guò)去看下前面的祖今。
點(diǎn)擊多選校坑，會(huì)出現(xiàn)多選框和下面的一些操作按鈕。都是些數(shù)據(jù)綁定千诬，顯示與隱藏類(lèi)的實(shí)現(xiàn)比較簡(jiǎn)單耍目。
多選我們直接給 checked 設(shè)置 Boole 開(kāi)關(guān)。
用戶(hù)已建分組點(diǎn)擊進(jìn)去的是點(diǎn)擊頂部菜單按鈕出現(xiàn)下拉菜單欄徐绑，這里直接使用微信提供的組件邪驮。
最后點(diǎn)擊從名片夾中添加進(jìn)入到以下頁(yè)面：
整個(gè)布局基本還是和首頁(yè)面差不多，這里不再多講傲茄，
頂部菜單直接多選綁定數(shù)據(jù)即可毅访。
牽扯到表單類(lèi)的基本全都是 from 表單提交事件。
除小部分接口方面欠缺外盘榨，寫(xiě)到這里其實(shí)分組前端方面效果基本實(shí)現(xiàn)喻粹。
好了，由于目前小程序開(kāi)發(fā)工具圖片上傳還有點(diǎn)問(wèn)題草巡，拍照收納無(wú)法實(shí)現(xiàn)守呜，所以微信小程序開(kāi)發(fā)教程也先暫告一段落，等開(kāi)發(fā)工具更新穩(wěn)定后，我還會(huì)再追加教程的內(nèi)容查乒，有機(jī)會(huì)的話把成品也給大家看看弥喉。
感謝朋友們一直以來(lái)的支持和關(guān)心，大家可以拿這個(gè)教程作為參考侣颂，摸索出自己的小程序開(kāi)發(fā)套路档桃。
大家多多在咱們的 QQ 群內(nèi)交流吧，群里每天都會(huì)有很多朋友交換代碼憔晒、答疑解惑，對(duì)大家的開(kāi)發(fā)和學(xué)習(xí)很有幫助蔑舞。
Hello小程序將與您共同成長(zhǎng)拒担。微信號(hào)：130870319 QQ群：40726600
