mui的索引列表indexedList （仿通讯录）

最新推荐文章于 2020-07-24 18:02:03 发布
最新推荐文章于 2020-07-24 18:02:03 发布
阅读量2k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932157/article/details/104058118
版权

1.人生实在太苦了，人家在安安心心睡觉，我还在敲代码。
现在我们来看一下，微信通讯录的详细做法：
1.我们来看一下页面代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min1.css" rel="stylesheet" />
		 <link rel="stylesheet" type="text/css" href="css/mui.indexedlist.css"/>
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">indexed list（索引列表）</h1>
		</header>
		<div class="mui-content">
			<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"  id="word"> 
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul class="mui-table-view">
						<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
						<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
						<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
						<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
						<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
						<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
						<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
						<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
						<li data-group="I" class="mui-table-view-divider mui-indexed-list-group">I</li>
						<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
						<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
						<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
						<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
						<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
						<li data-group="O" class="mui-table-view-divider mui-indexed-list-group">O</li>
						<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
						<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
						<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
						<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
						<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
						<li data-group="U" class="mui-table-view-divider mui-indexed-list-group">U</li>
						<li data-group="V" class="mui-table-view-divider mui-indexed-list-group">V</li>
						<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
						<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
						<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
						<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.indexedlist.js"></script>
		<script src="js/pinyinjs_pinyinUtil.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.ready(function() {
				 
				 show();
			});
			
			function    show(){ 
				$.get("http://m.tnblog.net/api/v1/home/5",function(data){
				     
								 ///每次加载把之前加载的数据清除
                $(".mui-table-view .mui-indexed-list-group").nextAll().not(".mui-indexed-list-group").remove();
 									for (var  key  in  data.value) { 
								 var pinyin=ConvertPinyin(data.value[key].blogname).substring(0, 1);
				             var pinyinAll=ConvertPinyin(data.value[key].blogname).substring(0);
										   var  blogname=data.value[key].blogname;
										   var  pinyinname="";
										for (var i = 0; i < blogname.length; i++) {
											pinyinname+=ConvertPinyin(blogname[i]).substring(0, 1)
										}
										 //循环字母列表
				     $(".mui-table-view .mui-indexed-list-group").each(function(){
								   if($(this).html()==pinyin){
										var    html="";
										html+=' <li data-value="'+pinyinname+'" data-tags="'+pinyinAll+'"';
										html+='class="mui-table-view-cell mui-indexed-list-item">'+data.value[key].blogname+'</li>';
									   $(this).after(html); 
									} 
									  
								});
								 
				}
				  //将后面没有值得字母列表隐藏
				  $(".mui-table-view .mui-indexed-list-group").each(function(){
					  console.log(JSON.stringify($(this).next().length))
									   if($(this).next().hasClass("mui-indexed-list-group") || $(this).next().length==0 ){
										   $(this).remove(); 
									   }
				  })
				 var header = document.querySelector('header.mui-bar');
				 var list = document.getElementById('list');
				 //calc hieght
				 list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				 //create 
				 window.indexedList = new mui.IndexedList(list);
								 
				 },'json')
								
								 
			}
		</script>
	</body>

</html>

上面提一下，有个汉语转拼音的js:
这个包有，在我的文章里：请链接：https://blog.csdn.net/weixin_45932157/article/details/104057348

运行效果为：
在这里插入图片描述

你的美，让我痴迷
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
mui的索引列表插件-增加热门城市
lorena0928的博客
03-09 7941
mui的索引列表插件的使用：动态数据绑定以及顶部搜索 并增加热门城市       页面中需要引入的文件。搜索框的样式移动到了header部分了。搜索框搜索完内容之后再点击清除按钮，然后点击字母索引会出现列表卡顿现象，请参照js里边注释的两行。搜索过内容清空后，会出现点击索引搜索时，搜索框一直聚焦，大家可自行进一步修改。并且搜索框的搜索只显示有数据的列表。希望大家进一步优化。有问题请指正。
mui及索引列表indexedList,mui.picker.有索引列表具体教程
05-30
好用的mui索引列表插件，我的博客中有详细教程，博客地址： https://blog.csdn.net/lianzhang861/article/details/80505799
JS将汉字转化为拼音
web开发自学
01-29 928
// JavaScript Document var PinYin = { "a": "\u554a\u963f\u9515", "ai": "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u...
mui 索引列表（数据动态生成）
fearlessnesszhang的博客
04-04 6200
查询过mui索引列表，发现与索引相关的内容只有 <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">indexed li...
mui的索引列表的实现
兔老大的胡萝卜
07-24 2122
抄的别人的博客，亲测有用，做了微调 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" c
微信小程序----全国机场索引列表（MUI索引列表）
止于至善
12-21 5739
DEMO下载 效果展示图 实现的原理 ‘当前选择机场’和右侧的导航栏采用的是固定定位； 左侧的展示窗口的滚动采用的是scroll-view组件； 选择中的字母提示是自己WXSS样式制作。 WXML view class=&amp;quot;right-nav&amp;quot;&amp;gt; view bindtap=&amp;quot;getCurrentCod
动态绑定城市索引列表
10-10
在这个场景中，我们关注的是“动态绑定城市索引列表”，这通常涉及到移动端应用的开发，特别是使用了mui框架和Vue.js这样的渐进式JavaScript框架的情况。下面我们将深入探讨这个主题。 首先，城市索引列表是一种...
MUI列表条目点击事件代码
03-04
在MUI中，列表通常由`<li>`元素构成，每个`<li>`代表一个列表项。为了实现列表条目的点击事件，我们需要添加特定的JavaScript代码。首先，确保在HTML结构中为每个列表项赋予一个唯一的ID或者类名，以便于在...
mui和html5中使用js实现通讯录、索引页面、搜索功能等的具体操作方法通用于小程序--实测
04-14
mui和html5中使用js实现通讯录、索引页面、搜索功能等的具体操作方法通用于小程序--实测，网路上几乎没有一个完整可用的方法，都是零零散散的，哎，自己码代码吧…… 直接拿去就能用，放在mui项目中直接就能用，用...
微信小程序实现全国机场索引列表
01-03
本文为大家分享了微信小程序实现MUI索引列表的具体代码，供大家参考，具体内容如下 效果展示图 实现的原理 ‘当前选择机场’和右侧的导航栏采用的是固定定位； 左侧的展示窗口的滚动采用的是scroll-view组件； ...
mui ---- 搜索列表自定义
11-03
1，直接添加引用indexed-list.js和indexed-list.css； 2，修改indexed-list.js的self.el.bar.offsetHeight - 40为 self.el.bar.offsetHeight - self.el.search.offsetHeight 此处的作用是防止你将搜索框去掉，导致的右侧导航不协调 3，修改group && group.length == 1为group 此处是因为你添加的热门等字符串长度大于1而不能触发定位函数 4，禁止self.bindSearchEvent(); 此处是由于我的页面不需要搜索，所以讲搜索的触发事件禁止 5，添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字 特别注意此处在utf-8的编码下可以是汉字，但是建议不要采取汉字 最后上边说的这几个地方在我的demo中都已修改好，你可以下载直接使用。 特别说明：如果你的页面需要哪个搜索框，只用放开第四步禁止的代码就好，然后将输入框加入进来，依然可以执行！
微信小程序----机场索引列表（MUI索引列表）
12-21
微信小程序----机场索引列表（MUI索引列表）：采用mui的效果实现。
索引列表插件
03-16
试用移动端网页开发，通过索引获取对应的列表位置
mui select hml安卓仿写
04-30
MUI 原生select在安卓，显示样式比较特殊，根据其他控件仿写的select
MUI索引列表自定义----添加热门、最近等多个模块
止于至善
11-03 3804
先看一下我们要实现的效果图首先我们需要引入的文件<link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/mui.indexedlist.css" rel="stylesheet" /> <script src="../js/mui.min.js"></script> <s
mui 动态绑定城市索引列表，使用vue进行绑定
杨克进的博客
10-10 1437
效果图： 演示地址：https://yangkejin.github.io/cityList/index.html 相关代码： 代码列表截图： 主要代码： index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="vi...
解决 mui 通讯录 索引列表，反复加载导致的搜索不正确问题
智识家园的博客
09-18 1445
按照mui提供的索引列表加载展示数据，在多次加载时会出现搜索不正常的问题，经过检查发现每重新加载一次数据就会重新注册input 的input事件，我的想法是保证只有一个window.indexedList = new mui.IndexedList(list);操作的实例。 修改 mui.indexedlist.js 代码，增加方法。 于是仿照init方法增加个一样的方法，但是在此处不再做...
MUI-LIST列表的基本使用
热门推荐
知他人之所知，晓他人之不晓。
11-05 3万+
列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码 class="mui-table-view"> class="mui-table-view-cell">Item 1 class="mui-table-view-cell">Item 2 cl
mui框架通讯录检索
weixin_30338481的博客
12-22 331
使用工具:HBuilder,这个软件开发效率非常高； 需求：手机通讯录页面,有字母拼音检索功能，如下图 解析：利用mui框架的index list组件即可搭建这个页面,可参考教程UI组件(这个页面很简单，我在谷百都很少人写这个东西，估计太简单没人写，有经验的大佬任意吐槽这篇菜鸡文章） 项目结构： mui框架形成主页面：addressList.html...
mui lis列表 带底层选择
最新发布
07-16
您好！对于带有底层选择的 MUI 列表，您可以使用 MUI 的 `Select` 组件来实现。下面是一个示例代码： ```jsx import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { FormControl, InputLabel, Select, MenuItem, } from '@material-ui/core'; const useStyles = makeStyles((theme) => ({ formControl: { margin: theme.spacing(1), minWidth: 120, }, })); const MyComponent = () => { const classes = useStyles(); const [selectedValue, setSelectedValue] = useState(''); const handleChange = (event) => { setSelectedValue(event.target.value); }; return ( <FormControl className={classes.formControl}> <InputLabel id="demo-simple-select-label">选择</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={selectedValue} onChange={handleChange} > <MenuItem value=""> 无 </MenuItem> <MenuItem value={10}>选项1</MenuItem> <MenuItem value={20}>选项2</MenuItem> <MenuItem value={30}>选项3</MenuItem> </Select> </FormControl> ); }; export default MyComponent; ``` 在上述代码中，我们使用了 `FormControl` 和 `Select` 组件来创建一个带有底层选择的 MUI 列表。通过使用 `useState` 来跟踪所选值，并使用 `onChange` 处理程序来更新该值。在 `Select` 组件中，您可以通过添加 `MenuItem` 来定义选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美，让我痴迷

你的好，我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值