索引列表

最新推荐文章于 2022-10-31 16:32:01 发布

随风小薇

最新推荐文章于 2022-10-31 16:32:01 发布

阅读量2.7k

点赞数

分类专栏：笔记

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_39197547/article/details/82842841

版权

笔记专栏收录该内容

47 篇文章 1 订阅

订阅专栏

常见的一种索引列表

<!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">
    <!-- <div id="hui-back"></div> -->
    <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>
    <!-- 列表数据 循环  hui-index-list-title 和 hui-list -->
    <div id="hui-list-test" class="hui-list">

    </div>

</div>
<div id="hui-index-list-bar">
    <!-- <a>A</a> -->
</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

hui.js

http://www.hcoder.net/hui

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

随风小薇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
索引列表

常见的一种索引列表&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
复制链接

扫一扫