前端實現未讀訊息提醒小紅點

原理：

檔案結構：

index.html    --  列表    

detail            --  詳情

remind          -- js元件

呼叫方法：

index.html說明：

1.列表中紅點相對定位在列表文字右上角，d為資料來源，amgloble.remind(d, 'text', 'id', 'list')呼叫方法；

2.點選列表，會將每條資料中的文字text，唯一標識id在位址列傳給detial.html詳情頁；

//d:資料， text：資料中的文字， key：資料中的唯一標識， dom：插入dom節點的id名

amgloble.remind(d,

'text',

'id',

'list');

script

>

detail.html 說明：

1.獲取位址列引數文字text，唯一標識id；

2.如果拿到本條資料id，說明使用者已經進入詳情頁，則將localstorage中儲存的檢視資料更新；

//獲取位址列引數

amgloble.updata(key);

//更新檢視資料

vartext

=amgloble.getquerystring(

'text');

$('#detail

').text(text);

script

>

remind.js說明：

1.remind()方法是寫入資料，在index.html頁面中呼叫，預設全部初始化為false，未讀；

2.update()方法更新資料，在detail.html頁面中呼叫，檢視過這條資料，這把這條資料改為true，已檢視；

3.getquerystring()，是常見的獲取位址列引數的方法。

(function

() ;
};var html = '';
for (i = 0, l = d.length; i < l; i++) 
else ;
var point = ischecked ? '' : '
'; //
已檢視不顯示紅點，未檢視就顯示紅點
html += '' + d[i].text + point + '
'; };
$('#' +dom).html(html);
},updata: 
function
(key) 
};},
getquerystring: 
function
(name) 
}})();

第一條我們點選過鏈結，已檢視的資料，在index.html頁面中，不再顯示紅點；

localstorage中儲存的資料是這樣的：

微信小程式小紅點未讀訊息如何實現？

如圖類似的 這樣的需求還挺多的，那麼如何實現呢？text 我的訂單 isunread true,unreadnum 2 icon images iconfont card.png text 我的代金券 isunread false,unreadnum 2 icon images iconfont i...

擴充套件uitabbar,解決訊息提示小紅點過大的問題

系統的uitabar小紅點顯示過大,需要修改其尺寸,我們可以通過擴充套件uitabbar的方式解決 如下 h import inte ce uitabbar badge void showbadgeonitemindex int index 顯示小紅點 void hidebadgeonitemind...

ios 實現控制項右上角新增小紅點

在很多情況下，我們會遇到新增小紅點的需求，比如乙個有了一條新動態會顯示乙個小紅點，起到提示使用者的作用。下面我來簡單說一下我的實現方法，希望可以幫到大家！首先我是寫了乙個uiview的延展類，方便以後直接呼叫。如下 uiview hmbadge.h 建立小紅點 import inte ce uivi...