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

今天給你們帶來的是微信小程序分組開發與左滑功能實現。

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

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

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

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

 

 

 

 

 

理清完基本流程咱們開始開發。首先整個佈局能夠先看下，我再一步步講。

 

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

 

固然觸發它出現的是

 

顯示窗口

 

點擊取消消失

 

當裏面的輸入框內容發生改變時 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 表單提交事件。 除小部分接口方面欠缺外，寫到這裏其實分組前端方面效果基本實現。