欧美中文字幕第一页-欧美中文字幕一区-欧美中文字幕一区二区三区-欧美中文字幕在线-欧美中文字幕在线播放-欧美中文字幕在线视频

玩轉微信應用號,「小程序」開發實操指南第五彈

我是創始人李巖:很抱歉!給自己產品做個廣告,點擊進來看看。  

玩轉微信應用號,「小程序」開發實操指南第五彈

鈦媒體注:鈦媒體作者博卡君對于“應用號的最終形態”與“怎樣將一個「服務號」改造成為「小程序」”的話題上,有著自己的獨特的理解。他想要用第三方工具的實例,來演示開發過程。今天,他為我們帶來《微信小程序編輯名片頁面開發》的內容。感興趣的朋友,也不要錯過此前鈦媒體發布的第一彈、第二彈和第三彈、第四彈中的精彩內容。

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

先來看看今天的整體思路:

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

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

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

玩轉微信應用號,「小程序」開發實操指南第五彈

玩轉微信應用號,「小程序」開發實操指南第五彈

玩轉微信應用號,「小程序」開發實操指南第五彈

玩轉微信應用號,「小程序」開發實操指南第五彈

玩轉微信應用號,「小程序」開發實操指南第五彈

理清完基本流程我們開始開發。首先整個布局可以先看下,我再一步步講。

玩轉微信應用號,「小程序」開發實操指南第五彈

靜態布號局后,我們開始實現新增分組效果,

當然觸發它出現的是

玩轉微信應用號,「小程序」開發實操指南第五彈

顯示窗口

玩轉微信應用號,「小程序」開發實操指南第五彈

點擊取消消失

玩轉微信應用號,「小程序」開發實操指南第五彈

當里面的輸入框內容發生改變時 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 群內交流吧,群里每天都會有很多朋友交換代碼、答疑解惑,對大家的開發和學習很有幫助。

更多商業新知,關注鈦媒體微信號:鈦媒體(ID:taimeiti)

玩轉微信應用號,「小程序」開發實操指南第五彈

鈦媒體微信二維碼

?

本文被轉載1次

首發媒體 鈦媒體 | 轉發媒體

隨意打賞

微信小程序開發微信公眾平臺微信小程序微信游戲
提交建議
微信掃一掃,分享給好友吧。
主站蜘蛛池模板: 一区二区三区不卡在线 | 久久综合综合 | 国产高清一级毛片在线不卡 | 亚洲色四在线视频观看 | 国产一级淫片a视频免费观看 | 欧美国产日韩在线播放 | 国产精品免费看 | 成人综合久久精品色婷婷 | 成 人 黄 色视频免费播放 | 瑟瑟综合 | 国产资源福利 | 亚洲精品久久久久中文字幕一区 | 91精品免费不卡在线观看 | 亚洲欧美在线免费 | 九九精品热线免费观看6 | 福利在线网 | 亚洲国产欧美91 | 在线播放波多野结衣 | 在线观看日韩欧美 | 四虎最新网址在线观看 | 精品一区二区三区亚洲 | 免费国产高清精品一区在线 | 九九视频免费在线观看 | 亚洲视频在线视频 | 国内精品久久久久影院日本 | 四虎永久地址入口 | 国产亚洲欧洲精品 | 91精品成人免费国产 | 99在线精品国产不卡在线观看 | 色偷偷亚洲第一成人综合网址 | 99精品欧美一区 | 欧美一区二区三区黄色 | 国产一级黄色录像 | 亚洲字幕在线观看 | 久久免费视频在线观看30 | 国产农村妇女一级毛片 | 亚洲一区免费看 | 激情伊人网 | 91伊人影院 | 久久亚洲精品一区二区三区浴池 | 曰曰鲁夜夜免费播放视频 |