mui-索引列表通讯录右侧高度是如何控制的

r囧r小猫 2021-10-18 08:44 253阅读 0赞

## 背景 ##

这是官方索引的效果图，右侧的内容是固定的，也可以根据字母的数量自动调节高度。  
这种智能的算法，会带来很多不必要的麻烦。这也是本人觉得mui做的很差的地方。页面和js高度耦合。如果不小心改掉了一个class可能页面的效果就没有了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

## 如何计算右侧26个字母的高度 ##

逻辑所在位置：mui.indexedlist.js  
过程说明：

1.  遍历打印右侧26个字母，或者根据实际内容显示任意个字母。
2.  获取body的高度，list的高度，header高度，searchinput的高度（在list内）
3.  页面的主要内容高度（左侧）=右侧索引栏高度= body-header；注如果list上有其他可见项目需要考虑在内。
4.  右侧字母高度= 索引栏高度/字母个数

## 问题点 ##

caleLayout: function() {
    			var self = this;
    			var withoutSearchHeight = (self.box.offsetHeight - self.el.search.offsetHeight) + 'px';
    			self.el.bar.style.height = withoutSearchHeight;
    			self.el.inner.style.height = withoutSearchHeight;
    			var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px';
    			self.el.barItems.forEach(function(item) {
    				item.style.height = barItemHeight;
    				item.style.lineHeight = barItemHeight;
    			});
    		},

上面第四条逻辑有问题  
var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + ‘px’;  
每个字母的高度=（索引栏的可见总高度-40）/ 字母个数  
由于 self.el.bar.offsetHeight并不完全等于索引兰的高度，所以按照这个算法，计算出来部分内容没显示。

## 修改方法 ##

用索引栏的真实高度替换掉，避免不一致的情况

var barItemHeight = ((self.box.offsetHeight - self.el.search.offsetHeight- 40) / self.el.barItems.length) + 'px';

## 结语 ##

对于使用mui的框架，但是右侧索引栏显示不正确的朋友留个参考

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20211018/243e34820a4b46bea4b443a049d6cffb.png