小程序模板網(wǎng)

微信小程序開(kāi)發(fā)教程第八章:分組開(kāi)發(fā)與左滑功能實(shí)現(xiàn)

發(fā)布時(shí)間:2018-03-20 09:42 所屬欄目:小程序開(kāi)發(fā)教程

整體思路:進(jìn)入分組管理頁(yè)面--點(diǎn)擊新建分組新建進(jìn)入到未分組頁(yè)面基本操作進(jìn)入到已建分組里面底部菜單欄操作--從名片夾中添加進(jìn)行操作。理清完基本流程我們開(kāi)始開(kāi)發(fā)。首先整個(gè)布局可以先看下,我再一步步講。靜態(tài)布號(hào) ...

 
 
 

整體思路:

 

 

進(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 軸;
* clientX,clientY:距離頁(yè)面可顯示區(qū)域(屏幕除去導(dǎo)航條)左上角距離,橫向?yàn)閄軸,縱向?yàn)閅軸;
* 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)。

 

 

 

 

一定記得在 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)。

 

 

 

 

 

 

選擇好名片后點(diǎn)擊設(shè)置分組會(huì)彈出新建好的分組列表供用戶(hù)確定設(shè)置到那個(gè)分組里面(這里由于后臺(tái)接口方面還在完善,不繼續(xù)往下寫(xiě)了)。

 

 

用戶(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)。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/22735.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)