mui的索引列表插件-增加热门城市

最新推荐文章于 2022-07-20 15:47:41 发布

lorena0928

最新推荐文章于 2022-07-20 15:47:41 发布

阅读量7.9k

点赞数

分类专栏：移动端插件

本文链接：https://blog.csdn.net/lorena0928/article/details/60960433

版权

mui的索引列表插件的使用：动态数据绑定以及顶部搜索并增加热门城市

页面中需要引入的文件。搜索框的样式移动到了header部分了。搜索框搜索完内容之后再点击清除按钮，然后点击字母索引会出现列表卡顿现象，请参照js里边注释的两行。搜索过内容清空后，会出现点击索引搜索时，搜索框一直聚焦，大家可自行进一步修改。并且搜索框的搜索只显示有数据的列表。

希望大家进一步优化。有问题请指正。

由于数据不是特别多，点击字母索引会出现不能定位到上边的情况，请查看数据列表是不是已经到头。如果本页已经显示到最底部的数据，就不会再定位了。

    <script src="../js/rem.js"></script>  rem控制响应式
    <link rel="stylesheet" type="text/css" href="../css/reset.css">  初始化样式，可自己定义
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/mui.indexedlist.css"/>
    <link rel="stylesheet" type="text/css" href="../css/city.css"/>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.indexedlist.js"></script>----》请参考如下js

首先是html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <title> 城市 </title>

    <script src="../js/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/mui.indexedlist.css"/>
    <link rel="stylesheet" type="text/css" href="../css/city.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <div class="mui-indexed-list-search mui-input-row mui-search search_title">
        <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="北京/beijing/bj/bjs/中国"
               style="border-radius: 6px">
    </div>
    <!--  <a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>-->
</header>
<div class="mui-content">
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl"
             class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="background-color: #fff">
            <a class="mui-control-item" href="#item1mobile">
                国内
            </a>
            <a class="mui-control-item" href="#item2mobile" id="national">
                国际
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">

                <div id='list' class="mui-indexed-list" >
                   <!-- <div class="mui-indexed-list-search mui-input-row mui-search">
                        <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
                    </div>-->
                    <div class="mui-indexed-list-bar listIndex">
                        <a >热</a>
                        <a>A</a>
                        <a>B</a>
                        <a>C</a>
                        <a>D</a>
                        <a>E</a>
                        <a>F</a>
                        <a<

最低0.47元/天解锁文章

lorena0928

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
6
评论
mui的索引列表插件-增加热门城市

mui的索引列表插件的使用：动态数据绑定以及顶部搜索并增加热门城市页面中需要引入的文件。搜索框的样式移动到了header部分了。搜索框搜索完内容之后再点击清除按钮，然后点击字母索引会出现列表卡顿现象，请参照js里边注释的两行。搜索过内容清空后，会出现点击索引搜索时，搜索框一直聚焦，大家可自行进一步修改。并且搜索框的搜索只显示有数据的列表。希望大家进一步优化。有问题请指正。
复制链接

扫一扫