某app頁面
很多場景都會用到icon配備紅點提示的功能,其優點在于能夠從入口處引導用戶點擊查看,對于強迫癥用戶來說更加能夠引導曝光率。
在“賺錢”頁面中,每一個宮格中的icon都會配有一個紅點。
簡單說,紅點的展示內容和展示時機,由server控制;紅點消失的時機,由點擊控制。
對于一個完整的宮格數據,包含以下信息:
menu_id;//一個宮格的標識,全場唯一
name;// 名稱,圖標下面的文字信息
icon;// icon url 圖標url
icon_remind;//右上角的角標文案
skip_url;//點擊跳轉的url
is_tp_url;//是否第三方url
tp_declare;//免責聲明文案內容
remind_new_id;//標記icon_remind是否變化,本地存儲
在判斷是否展示紅點的邏輯中,只需要判斷兩個東西:isClick(是否點擊)和(icon_remind.equals(lastRemindNewId)).
判斷流程圖如下:
image.png
remind_new_id字段歸根結底就是個md5。
通過上述機制,即保證了點擊紅點所在的宮格能夠使得紅點消失,也可以保證server在需要展示新的內容的時候,即便在點擊過該宮格之后,依然能夠重新喚起紅點邏輯展示新的內容。