純css實(shí)現(xiàn)手機(jī)通訊錄

leonardofed 發(fā)布于2019-08-23 12:23 / 2166人閱讀

摘要：不過要是一個(gè)簡單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對要比通過滾動監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用

我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果

首字母吸頂

快速定位

下面我們來實(shí)現(xiàn)一下

頁面結(jié)構(gòu)

這里頁面結(jié)構(gòu)很簡單，就是兩個(gè)列表

然后加點(diǎn)樣式

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
dl,dd{
    margin: 0;
}
.con{
    position: relative;
    height: 100%;
    overflow-x: hidden;
}
.index{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.index a{
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: cornflowerblue;
    text-decoration: none;
    color: #fff;
    outline: 0;
    margin: 5px;
}
.contacts{
    height: 100%;
    background: #fff;
    overflow: auto;
    line-height: 2em;
}
.contacts dt{
    background: bisque;
    font-size: 1.5rem;
    color:cornflowerblue;
    height: 2em;
    line-height: 2em;
    padding: 0 10px;
}
.contacts dd{
    padding: 0 10px;
    display: block;
    cursor: pointer;
}

這樣就可以看到布局了

https://codepen.io/xboxyan/pe...

實(shí)現(xiàn)吸頂效果

吸頂效果其實(shí)很簡單，只要用到css中的新屬性position:sticky就可以了

粘性定位元素（stickily positioned element）是計(jì)算后位置屬性為 sticky 的元素。

兼容性還不錯(cuò)，至少在移動端可以放心使用

給.contacts dt加上position:sticky

.contacts dt{
    /*添加如下屬性*/
    position: sticky;
    top: 0;
}

這樣就實(shí)現(xiàn)了每個(gè)類目吸頂效果

https://codepen.io/xboxyan/pe...

實(shí)現(xiàn)快速定位效果

如果不用js，那么可采用href錨點(diǎn)的方式來實(shí)現(xiàn)定位

具體做法就是



...

...

如果整個(gè)頁面是可以滾動的，那么只要點(diǎn)擊a，那么頁面就會迅速跳轉(zhuǎn)到id=A的元素上

現(xiàn)在對我們的頁面添加一些herf和id

https://codepen.io/xboxyan/pe...

點(diǎn)擊右側(cè)的導(dǎo)航按鈕，頁面就可以快速定位了

等等，好像還有些問題，當(dāng)往回跳轉(zhuǎn)時(shí)，發(fā)現(xiàn)并沒有完全展開，比如像調(diào)回A，結(jié)果雖然A標(biāo)簽出來了，但是，A下面的列表卻沒有出來

這是什么問題呢？

經(jīng)過多次的研究，發(fā)現(xiàn)是position:sticky搞的鬼！

當(dāng)往上定位的時(shí)候，我們通過href定位過去，定位的依據(jù)是到該元素第一次可見的位置，此時(shí)雖然該元素空壓機(jī)了，但是下面的元素沒有展示出來，所以就造成了這樣的問題

發(fā)現(xiàn)問題就要解決問題

快速定位效果修復(fù)

其實(shí)我們想要定位的還可以是A下面的第一個(gè)列表元素，但是又不能是該元素，因?yàn)槿绻堑谝淮?，?dāng)跳轉(zhuǎn)的時(shí)候就會被上面的A標(biāo)簽遮住。

所以我們在兩者之間再插入一個(gè)標(biāo)簽，用于定位

如下，添加了

如果直接放在這里肯定會占空間，所以我們把他向上位移，然后設(shè)置不可見，使該元素剛好覆蓋在原標(biāo)簽位置

如下

.contacts .stikcy-fix{
    position: static;
    visibility: hidden;
    margin-top: -2em;
}

https://codepen.io/xboxyan/pe...

現(xiàn)在看看，是不是完美跳轉(zhuǎn)了？

其他細(xì)節(jié)

通常我們在選擇右側(cè)索引時(shí)，頁面中間會出現(xiàn)一個(gè)大寫的字母

這個(gè)如果用css實(shí)現(xiàn)也比較簡單，用到偽元素的content:attr()就可以了，在之前的文章(用純css實(shí)現(xiàn)打星星效果)中也講到過

具體實(shí)現(xiàn)如下

.index a:active:after{
    content: attr(data-type);
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.5);
}

這里用到了content: attr(data-type)，所以a上面要有一個(gè)data-type屬性



    A
    B

其次，實(shí)際項(xiàng)目中，我們需要用js來生成這些列表

假定我們要求的數(shù)據(jù)如下

var data = [
        {
            "type":"A",
            "user":[
                {
                    name:"a1"
                },
                {
                    name:"a2"
                },
                {
                    name:"a3"
                },
                {
                    name:"a1"
                },
                {
                    name:"a2"
                },
                {
                    name:"a3"
                },
                {
                    name:"a3"
                },
                {
                    name:"a1"
                },
                {
                    name:"a2"
                },
                {
                    name:"a3"
                },
            ]
        },
        {
            "type":"B",
            "user":[
                {
                    name:"b1"
                },
                {
                    name:"b2"
                },
                {
                    name:"b3"
                },
                {
                    name:"b1"
                },
                {
                    name:"b2"
                },
                {
                    name:"b3"
                },
                {
                    name:"b3"
                },
                {
                    name:"b1"
                },
                {
                    name:"b2"
                },
                {
                    name:"b3"
                },
            ]
        },
        {
            "type":"C",
            "user":[
                {
                    name:"c1"
                },
                {
                    name:"c2"
                },
                {
                    name:"c3"
                },
                {
                    name:"c1"
                },
                {
                    name:"c2"
                },
                {
                    name:"c3"
                },
                {
                    name:"c3"
                },
                {
                    name:"c1"
                },
                {
                    name:"c2"
                },
                {
                    name:"c3"
                },
            ]
        },
        {
            "type":"D",
            "user":[
                {
                    name:"d1"
                },
                {
                    name:"d2"
                },
                {
                    name:"d3"
                },
                {
                    name:"d1"
                },
                {
                    name:"d2"
                },
                {
                    name:"d3"
                },
                {
                    name:"d3"
                },
                {
                    name:"d1"
                },
                {
                    name:"d2"
                },
                {
                    name:"d3"
                },
            ]
        },
        {
            "type":"E",
            "user":[
                {
                    name:"e1"
                },
                {
                    name:"e2"
                },
                {
                    name:"e3"
                },
                {
                    name:"e1"
                },
                {
                    name:"e2"
                },
                {
                    name:"e3"
                },
                {
                    name:"e3"
                },
                {
                    name:"e1"
                },
                {
                    name:"e2"
                },
                {
                    name:"e3"
                },
            ]
        }
    ]

這種格式的數(shù)據(jù)可以要求后端返回，或者直接前端改造都行

然后對數(shù)據(jù)進(jìn)行循環(huán)遍歷即可

var indexs = document.getElementById("index");
var contacts = document.getElementById("contacts");
var index_html = "";
var contacts_html = "";
data.forEach(el=>{
    contacts_html += ""+el.type+"
";
    index_html += ""+el.type+"";
    el.user.forEach(d=>{
        contacts_html+=""+d.name+"";
    })
    contacts_html+=""
})
indexs.innerHTML = index_html;
contacts.innerHTML = contacts_html;

https://codepen.io/xboxyan/pe...

這部分js只是生成布局，沒有任何功能上的邏輯

一些不足

雖然通過錨點(diǎn)實(shí)現(xiàn)列表的快速定位，但是此時(shí)瀏覽器的地址欄會加上#A這樣的標(biāo)識，一不好看，二在使用瀏覽器默認(rèn)的返回時(shí)會把這些標(biāo)識全部走一遍，不太方便。

還有一個(gè)問題，在滾動列表的時(shí)候，沒法做到右側(cè)索引當(dāng)前類別高亮顯示，同時(shí)右側(cè)索引也不支持滑動快速定位。

這些細(xì)節(jié)問題也只能通過js來修復(fù)了。

不過要是一個(gè)簡單的小項(xiàng)目，沒那么多要求的話，純css還是能很好的適用的，性能上絕對要比通過js滾動監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用^^

GPU云服務(wù)器云服務(wù)器手機(jī)web實(shí)現(xiàn)即時(shí)通訊純CSS android實(shí)現(xiàn)通訊錄實(shí)現(xiàn)語音通訊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98410.html

發(fā)表評論

登陸后可評論

0條評論

leonardofed

男|高級講師

我要關(guān)注我要私信

TA的文章

HostRound：美國達(dá)拉斯機(jī)房/E-2276G/32GB DDR4/1TB NVMe+4TB H

閱讀 1371·2021-09-30 09:55
zji：促銷全新中國香港特惠E3物理服務(wù)器，葵灣機(jī)房，CN2+BGP線路，月付最高優(yōu)惠300元

閱讀 1897·2021-08-27 13:10
如何自定義CSS滾動條的樣式？

閱讀 2244·2019-08-29 17:22
[Hexo-NexT]鼠標(biāo)選取文字自動提示版權(quán)信息

閱讀 1298·2019-08-29 16:30
小程序認(rèn)證流程

閱讀 3464·2019-08-26 18:37
react輪播圖組件react-slider-light

閱讀 2348·2019-08-26 11:47
每個(gè)JavaScript開發(fā)人員都應(yīng)該知道的新ES2018功能（譯文）

閱讀 1162·2019-08-23 14:44
Browsers Disabled Audio AutoPlay

閱讀 1740·2019-08-23 13:46

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

純css實(shí)現(xiàn)手機(jī)通訊錄

相關(guān)文章