【背景介紹】
微信朋友圈,一個神奇的地方,如同生活中的另一片大陸,在那里總是會有你感興趣的地方,在不同的人眼中,朋友圈是不一樣的,在產品人的眼中,朋友圈充滿了許多的設計亮點,領先的產品理念,一個朋友圈包含了人性、群體、社交等多種考慮。
【功能介紹】
實現(xiàn)朋友圈的圖文發(fā)布效果,包括相冊選擇圖,朋友圈的圖文刪除等功能,以往都給大家共享源文件,這次就不分享源文件了,(小伙伴們自己努力實現(xiàn)效果吧,【最愛海賊】)
1、利用中繼器實現(xiàn)圖文展示,并可上下滑動
主要用到了中繼器如何添加行,如何顯示數(shù)據(jù),動態(tài)面板如何實現(xiàn)上下滑動等。
1.1、效果預覽
1.2、實現(xiàn)原理
拖入一個中繼器,根據(jù)朋友圈的布局,添加中繼器中的元素,并填充數(shù)據(jù),具體實現(xiàn)步驟如下圖所示:
數(shù)據(jù)填充之后,返回瀏覽,發(fā)現(xiàn)中繼器顯示的仍然是默認內容,那是因為我們尚未設置中繼器的相關事件,中繼器只有設置了每項加載事件,才會顯示相應數(shù)據(jù)內容,設置方法如下圖:
設置完成后,再返回瀏覽,發(fā)現(xiàn)中繼器中填充的數(shù)據(jù)已經(jīng)成功顯示,那么列表內容眾多,一屏幕顯示不完,必須可以上下滑動才可以,這時候就用到了動態(tài)面板的一個屬性,鼠標右鍵點擊動態(tài)面板,在彈出框中依次選擇滾動條>自動顯示垂直滾動條,設置完成后,滾動鼠標滑輪,即可實現(xiàn)頁面滾動效果。
2、實現(xiàn)點擊右上角相機圖標,彈出功能菜單
這里主要用到了動態(tài)面板的一些屬性效果
2.1、效果預覽
2.2、實現(xiàn)步驟
首先拖入一個動態(tài)面板,命名為d_cover,設置三個狀態(tài),分別為change_photo(選擇圖片)、photo_list(相冊列表)、push_photo(發(fā)送圖片),具體如下圖。
默認d_cover隱藏并位于最底層,點擊右上角相機圖標,顯示d_cover,并置于最頂層,點擊取消,隱藏d_cover。(n1,n2,n3,為樓主測試所用,可以不用理會)
3、實現(xiàn)相冊選取圖片,并展示到發(fā)布頁面,點擊發(fā)送,添加新的數(shù)據(jù)到中繼器中,實現(xiàn)最新添加的信息排布在最上方
主要用到了選中/未選中,全局變量等
3.1、最終效果預覽
3.2、實現(xiàn)步驟
首先創(chuàng)建三個全局變量,命名為num1,num2,num3,分別對應喬巴,索隆,烏索普。設置變量初始值為:0,默認規(guī)則:0為未選中狀態(tài),1為選中狀態(tài)。
設置選中按鈕的事件
設置完成按鈕的事件,將按鈕的點擊結果傳遞到發(fā)布頁面(注意,只能選擇兩張圖片)
設置發(fā)布按鈕的事件,實現(xiàn)最終信息的發(fā)布
信息發(fā)布后,實現(xiàn)最新的信息排布在最上方,這里用到了中繼器的排序,添加一個根據(jù)時間的排序。
【DEMO】
DEMO