mui修改上拉加载/下拉刷新图标颜色字体以及图标

Song • 1904 次浏览 • 0个评论 • 2019年04月04日

修改默认图标,默认首页mui-spinner和mui-icon-pulldown：

// var CLASS_SPINNER = 'mui-spinner';
// var CLASS_ICON_PULLDOWN = 'mui-icon-pulldown';
var CLASS_SPINNER = 'iconfont iconicon';
var CLASS_ICON_PULLDOWN = 'iconfont iconshuaxin';

修改旋转方向以及速度等动画效果,具体代码在mui.css中的mui-spinner中也有设置，还可以修改mui.js：

loading.className = CLASS_LOADING;
loading.style.webkitAnimation = "spinner-spin 1s step-end infinite";

想控制图标颜色以及大小可以修改mui.css中的mui-spinner等：

.mui-spinner
{
    display: inline-block;
    width: 18px;
    height: 18px;

    -webkit-transform-origin: 50%;
            transform-origin: 50%;
    -webkit-animation: spinner-spin 1s step-end infinite;
            animation: spinner-spin 1s step-end infinite;
}

如下为相关参数：

/*主体样式,如文字大小颜色*/
.mui-pull-caption
{
}
/* 加载中图标大小,只能通过宽高控制 */
.mui-spinner{
    width: 20px;
    height: 20px;
}
/* 上下拉图标 */
.mui-icon-pulldown {  
    color: #FF058B;  
}
/* 下拉刷新控制 */
.mui-content .mui-pull-top-pocket{
    width: 100%;
}
/* 上拉加载控制 */
.mui-content .mui-pull-bottom-pocket { 
    width: 100%;
}

更多参考：MUI自定义下拉刷新样式成功,但是如何自定义上拉加载样式呢