如下图所示，文字变形，而且横线也变形了，请问是怎么回事？
胤弘菱条码
- 发布：2015-03-02 22:31
- 更新：2018-07-18 09:21
- 阅读：2295
MUI列表控件文字变形
分类：MUI
胤弘菱条码 (作者) - www.jingshiba.com 条形码
必然，版本号是android 4.2.2。
在滚动list的时候，原来变形的部分有时候会恢复正常。请问是不是HTML渲染的时候，现有的框架做了某些处理导致的？
胤弘菱条码 (作者) - www.jingshiba.com 条形码
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
}
</style>
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul id="list" class="mui-table-view">
</ul>
</div>
</div>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a href="callchat.html" title="用户"><img class="mui-media-object mui-pull-left" src="images/userdefault.png">' + '<div class="mui-media-body">幸福' + '<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div>' + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
//mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<div class="mui-slider-right mui-disabled" style="margin-top:-2px"> <a class="mui-btn mui-btn-grey mui-icon mui-icon-person"></a><a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a><a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a></div><div class="mui-slider-handle"><a href="userdetail.html" title="用户">' + '<img class="mui-media-object mui-pull-left" src="images/userdefault.png">' + '<div class="mui-media-body">幸福' + '<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p></div>' + '</a></div>';
table.appendChild(li);
}
}, 1500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
var templates = {};
var firstClick = true;
window.addEventListener('firstClick', function() {
firstClick = false;
});
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
if (!template) {
//预加载共用父模板；
var headerWebview = mui.preload({
url: header,
id: name + "-main",
styles: {
popGesture: "hide",
},
extras: {
mType: 'main'
}
});
//预加载共用子webview
var subWebview = mui.preload({
url: !content ? "" : content,
id: name + "-sub",
styles: {
top: '45px',
bottom: '0px',
},
extras: {
mType: 'sub'
}
});
subWebview.addEventListener('loaded', function() {
if (!firstClick) {
setTimeout(function() {
subWebview.show();
}, 50);
}
});
subWebview.hide();
headerWebview.append(subWebview);
//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
headerWebview.addEventListener('hide', function() {
subWebview.hide("none");
});
}
templates[name] = template = {
name: name,
header: headerWebview,
content: subWebview,
loaded: loading
};
}
return template;
};
var initTemplates = function() {
getTemplate('default', 'template.html', 'userdetail.html');
};
mui.plusReady(function() {
//初始化模板
initTemplates(); //预加载所有模板
});
//主列表点击事件
mui('#list').on('tap', 'a', function() {
var id = this.getAttribute('href');
var type = this.getAttribute("open-type");
if (type == "common") {
if (~id.indexOf('')) {
var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9998,
popGesture: pop
},
waiting: {
autoShow: false
}
});
} else {
mui.openWindow({
id: id,
url: this.href,
waiting: {
autoShow: false
}
});
}
} else {
if (id && ~id.indexOf('.html')) {
var href = this.href;
//获得共用模板组
var template = ~href.indexOf('pullrefresh.html') ? getTemplate('pullrefresh') : getTemplate('default');
//判断是否显示右上角menu图标；
var showMenu = ~href.indexOf('popovers.html') ? true : false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.title;
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview, 'updateHeader', {
title: title,
showMenu: showMenu
});
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
contentWebview.loadURL(this.href);
} else {
reload = false;
}
} else {
reload = false;
}
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
if (firstClick) {
firstClick = false;
}
}
}
});
</script>
</body> </html>
