索引列表

我会带着你远行 2021-09-16 11:24 447阅读 0赞

常见的一种索引列表

![70][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>HUI </title>
    <link rel="stylesheet" type="text/css" href="css/hui.css" />
    <style>
    #hui-index-list-bar{width:25px; height:100%; position:fixed; z-index:2; top:46px; right:0px; background:#E4E4E4; padding-top:8px;}
    #hui-index-list-bar a{display:block; width:100%; height:20px; line-height:20px; text-align:center; font-size:13px; color:#A3A3A3;}
    .hui-index-list-title{height:44px; background:#F8F8F8; line-height:44px; padding:0px 10px; border-bottom:1px solid #E4E3E6;}
    #hui-list-test{margin-top: 48px}
    #hui-index-list-search{width:100%; height:26px; border-bottom:1px solid #E4E3E6; position:fixed; top:44px; left:0px; background:#FFFFFF;  z-index:1; padding:10px 0px;}
    #hui-index-list-search input{width:100%; padding:0px 44px; height:26px; line-height:26px; border:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; webkit-appearance:none; -moz-appearance:none; appearance:none;}
    #hui-index-list-search:before{content:'\e714'; width:44px; height:44px; line-height:44px; text-align:center; display:block; position:absolute; left:0px; top:0px; font-family:"hui-font"; font-size:16px;}
    </style>
    </head>
    <body>
    <header class="hui-header">
        
        <h1>HUI 索引列表</h1>
    </header>
    <div class="hui-wrap">
        <div id="hui-index-list-search">
            <input type="text" name="seach" id="hui-index-list-search-input" value="" placeholder="请输入关键字进行搜索" />
        </div>
        
        <div id="hui-list-test" class="hui-list">
    
        </div>
    
    </div>
    <div id="hui-index-list-bar">
        
    </div>
    <div id="scroll" style="display:none;"></div>
    <script type="text/javascript" src="js/hui.js"></script>
    <script src="js/city.js"></script>
    <script>
        console.log(city)
        var htmls ='';
        var barList="";
        var sreachInput = document.getElementById('hui-list-test');
        var huibar = document.getElementById('hui-index-list-bar');
        city.map(item=>{
            
            console.log(item.title)
            htmls+='<div class="hui-index-list-title" id="hui-index-list-title_'+item.title+'">'+item.title+'</div>';
            barList+='<a>'+(item.title).slice(0,1)+'</a>';
            var itemList=item.item;
            
            console.log(itemList)
            itemList.map(listItem=>{
                        htmls+='<div class="hui-list">'+
                            '<a href="javascript:;"><div class="hui-list-text" onclick="selectTodo(\''+listItem.name+'\')">'+listItem.name+'</div></a>'+
                        '</div>';
            })  
        })
        console.log(htmls)
        sreachInput.innerHTML=htmls;
        huibar.innerHTML=barList;
    hui.plusReady(function(){
        //头部搜索适应沉浸式【非app开发可移除】
        hui('#hui-index-list-search').css({top: 44 + hui.immersedStatusbarHeight + 'px'});
        hui('#hui-index-list-bar').css({top: 44 + hui.immersedStatusbarHeight + 'px'});
    });
    /*
     * 说明:
     * 城市例子展示到了 D，真实项目开发按照结构完成部署即可
     * 请按照以下js实现 indexList
     */
    //1、右侧字母序号点击事件绑定
    hui('#hui-index-list-bar').find('a').click(function(){
        
        skipToIndex(this.innerHTML);
        console.log(this.innerHTML)
    });
    //2、跳转到指定字母开头处函数定义
    function skipToIndex(index){
        var listTitle = hui('#hui-index-list-title_'+index);
        if(listTitle.length < 1){hui.toast('没有对应的数据，演示数据到D'); return;}
        var sets = listTitle.offset();
        console.log(sets)
        //减掉46是头部导航的高度 根据实际需求设置
        hui.scrollTop(sets.top - 90);
    }
    //3、定义列表数据点击函数 根据实际需求自行编写代码即可
    function selectTodo(val){
        hui.toast(val);
    }
    //4、搜索
    var sreachInput = document.getElementById('hui-index-list-search-input');
    sreachInput.addEventListener('keyup', function(){
        var k = this.value;
        if(k.length < 1){return false;}
        var lists = hui('.hui-list-text');
        for(var i = 0; i < lists.length; i++){
            var _sobj = lists.dom[i];
            if(_sobj.innerHTML.indexOf(k) != -1){
                var sets = hui.offset(_sobj);
                console.log(sets.top);
                setTimeout(function(){hui.scrollTop(sets.top - 90 - hui.immersedStatusbarHeight);}, 300);
                break;
            }
        }
    });
    </script>
    </body>
    </html>

城市数据:

[https://github.com/wangweiruning/wx-list-index/blob/master/utils/allcity.js][https_github.com_wangweiruning_wx-list-index_blob_master_utils_allcity.js]

hui.js

[http://www.hcoder.net/hui][http_www.hcoder.net_hui]

该案例必须在手机上才能运行

[70]: /images/20210908/54c2f98cd9244b869f900cb4e7a0f555.png
[https_github.com_wangweiruning_wx-list-index_blob_master_utils_allcity.js]: https://github.com/wangweiruning/wx-list-index/blob/master/utils/allcity.js
[http_www.hcoder.net_hui]: http://www.hcoder.net/hui