博卡君今天繼續更新,忙了一天,終于有時間開工寫教程。不羅嗦了,今天我們來看看如何實作一些前端的功能和效果。
第八章:微信小程式分組開發與左滑功能實作
先來看看今天的整體思路:
進入分組管理頁面-->點選建立分組建立
進入到未分組頁面基本操作
進入到已建分組裡面底部菜單欄操作-->從名片夾中添加進行操作。
理清完基本流程我們開始開發。首先整個布局可以先看下,我再一步步講。
靜态布号局後,我們開始實作新增分組效果,
當然觸發它出現的是
顯示視窗
點選取消消失
當裡面的輸入框内容發生改變時 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 表單送出事件。 除小部分接口方面欠缺外,寫到這裡其實分組前端方面效果基本實作。
好了,由于目前小程式開發工具圖檔上傳還有點問題,拍照收納無法實作,是以博卡君的微信小程式開發教程也先暫告一段落,等開發工具更新穩定後,我還會再追加教程的内容,有機會的話把成品也給大家看看。
感謝朋友們一直以來的支援和關心,大家可以拿這個教程作為參考,摸索出自己的小程式開發套路。我最近還會在論壇、微信公衆号裡收集一下大家的留言和問題,統一給大家一些回複。大家多多在咱們的 QQ 群内交流吧,群裡每天都會有很多朋友交換代碼、答疑解惑,對大家的開發和學習很有幫助。
轉載自:https://my.oschina.net/wwnick/blog/752421
歡迎關注微信公衆平台:上帝派來改造世界的人

如果您覺得本文對你有用,不妨幫忙點個贊,或者在評論裡給我一句贊美,小小成就都是今後繼續為大家編寫優質文章的動力!
歡迎您持續關注我的部落格:)
作者:Ken Wang
出處:http://www.cnblogs.com/Wolfmanlq/
版權所有,歡迎保留原文連結進行轉載:)