全球首個微信小程序應(yīng)用號開發(fā)教程5

1、第八章：微信小程序分組開發(fā)與左滑功能實現(xiàn)先來看看今天的整體思路：進入分組管理頁面-點擊新建分組新建進入到未分組頁面基本操作進入到已建分組里面底部菜單欄操作-從名片夾中添加進行操作。理清完基本流程我們開始開發(fā)。首先整個布局可以先看下，我再一步步講。靜態(tài)布號局后，我們開始實現(xiàn)新增分組效果，當然觸發(fā)它出現(xiàn)的是顯示窗口點擊取消消失當里面的輸入框內(nèi)容發(fā)生改變時 bindinput 事件，大家別使用 bindchange 事件，這里的 bindchange 事件只有當失去焦點時才會被觸發(fā)。當輸入框事件發(fā)生時，確定按鈕會變成可以點擊狀態(tài)，為空時，addTeam樣式數(shù)據(jù)綁定。里面有表單就使用了 from。創(chuàng)建

2、分組請求交互。創(chuàng)建分組完成，這里可能很多疑問，為什么不使用微信提供的模態(tài)框組件來實現(xiàn)，而是自己實現(xiàn)，其實我也很懶，非常想使用自帶的模態(tài)框組件，但是發(fā)現(xiàn)在模態(tài)框里面提交表單好像有點麻煩，直接自定義了。接下來創(chuàng)建好的分組支持左滑刪除與重命名，今天重點談下左滑刪除的實現(xiàn)方式。首先需要左滑的是被創(chuàng)建好的分組，未分組是寫死的，故而不支持的。左滑刪除使用了兩個事件 bindtouchstart 與 bindtouchmove，這里必須綁定它的 id，這個 id 都是不同的，我這使用的用戶創(chuàng)建完成后在后臺生成的一個 id 號，之后我再 block 出來使用在這里，這個 id 都是唯一的，不能是相同的 id。

3、樣式布局，父元素是絕對定位，子元素刪除是相對定位，鑒于動畫效果，我這加了 css3 的動畫效果，使滑動帶點動畫效果?，F(xiàn)在我們來看事件構(gòu)成：Bindtap 點擊之后直接是跳轉(zhuǎn)頁面。左滑從觸摸事件開始，當然需使用的參數(shù)在外面最好先定義一下：bindtouchStart 發(fā)生后，會執(zhí)行 bindtouchmove 事件，在這里我們可以判斷是否左右滑動：Var dataId = e.currentTarget.id /獲取到前面唯一的id； If(key) /用戶左滑距離很長時會發(fā)生多次左滑事件，這里定義一個開關(guān)發(fā)生第一次之后就關(guān)閉它；Touch是獲取觸摸點的一些數(shù)據(jù)，touches 是一個觸摸點的數(shù)

4、組，每個觸摸點包括以下屬性：pageX,pageY：距離文檔左上角的距離，文檔的左上角為原點，橫向為 X 軸，縱向為 Y 軸；clientX,clientY：距離頁面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角距離，橫向為X軸，縱向為Y軸；screenX,screenY：距離屏幕左上角的距離，屏幕左上角為原點，橫向為X軸，縱向為Y軸；這里使用 clientX,clientY 即可。我們在 bindtouchstart 時記錄到開始的點，在 bindtouchmove 記錄到觸摸結(jié)束的點，如果 X 軸滑動大于 Y 軸的，再如果結(jié)束點-開始點小于一個數(shù)值（這個數(shù)組可以自己設(shè)置，鑒于靈敏度，我這設(shè)置的很?。?，

5、右滑也是同理。判斷到左滑與右滑事件后，我們就需要對當前組件綁定數(shù)據(jù)了，數(shù)據(jù)從那里來？可以看下我這數(shù)組一個來歷，以及怎么被左滑事件里面獲取到（我這數(shù)據(jù)是一個數(shù)組，需要在 wxml 里面 block 的）。這時候取到需要的數(shù)組，循環(huán)出來后，我進行對比，如果數(shù)據(jù)的 id= 當前被事件操作的 id，那么我給改數(shù)組再添加一個 right 向右偏移 15%，否則其他都不偏移，右滑同理，直接全部設(shè)置為 0。最后把數(shù)據(jù)到綁定到頁面上來。OK，左滑效果實現(xiàn)。如果出現(xiàn)全部被滾動了，記得在外層加上，X 軸關(guān)閉即可。這時候你點擊左滑會出現(xiàn)點透效果，官方文檔提供給我們一個 catch，不冒泡點擊事件，即可完美解決。點擊

6、刪除事件彈出模態(tài)框供用戶確定是否刪除。這里你點擊取消時還要記得把左滑刪除按鈕去掉可能用戶體驗會好點。一定記得在 data( modalHidden:true ) 不然會出現(xiàn)一加載頁面即出現(xiàn)了模態(tài)框。點擊未分組按鈕進入到未分組名片列表頁面。這個布局完全是 copy 首頁過來的，后面只是數(shù)據(jù)接口有變而已，大家有興趣可以回過去看下前面的。點擊多選，會出現(xiàn)多選框和下面的一些操作按鈕。都是些數(shù)據(jù)綁定，顯示與隱藏類的實現(xiàn)比較簡單。多選我們直接給 checked 設(shè)置 Boole 開關(guān)。選擇好名片后點擊設(shè)置分組會彈出新建好的分組列表供用戶確定設(shè)置到那個分組里面（這里由于后臺接口方面還在完善，不繼續(xù)往下寫了）

7、。用戶已建分組點擊進去的是點擊頂部菜單按鈕出現(xiàn)下拉菜單欄，這里直接使用微信提供的組件。最后點擊從名片夾中添加進入到以下頁面：整個布局基本還是和首頁面差不多，這里不再多講，頂部菜單直接多選綁定數(shù)據(jù)即可。牽扯到表單類的基本全都是 from 表單提交事件。除小部分接口方面欠缺外，寫到這里其實分組前端方面效果基本實現(xiàn)。好了，由于目前小程序開發(fā)工具圖片上傳還有點問題，拍照收納無法實現(xiàn)，所以微信小程序開發(fā)教程也先暫告一段落，等開發(fā)工具更新穩(wěn)定后，我還會再追加教程的內(nèi)容，有機會的話把成品也給大家看看。感謝朋友們一直以來的支持和關(guān)心，大家可以拿這個教程作為參考，摸索出自己的小程序開發(fā)套路。咨詢更多微信小程序?qū)W

8、習(xí)班信息，請點擊以下微信公號文章鏈接了解(或掃以下二維碼詳細了解)： HYPERLINK /s?_biz=MjM5ODgwNjE2Mw=&mid=2247483668&idx=1&sn=91187cf49bef9d5b29adb4a9cb4c1cd9&chksm=a6c456e891b3dffe9cef42f514bfc3c57aedd9df48da38937871e0c1ec1769076b53bf6bdf19&mpshare=1&scene=1&srcid=1017Zawfhl4wUrDI3ebDCp01#rd l rd /s?_biz=MjM5ODgwNjE2Mw=&mid=2247483668&idx=1&sn=91187cf49bef9d5b29adb4a9cb4c1cd9&chksm=a6c456e891b3df