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

Song • 244次浏览 • 0个评论 • 2019-04-04 03:42:57

修改默认图标,默认首页mui-spinnermui-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自定义下拉刷新样式成功,但是如何自定义上拉加载样式呢

提交评论
要回复文章请先登录注册
用户评论
  • 没有评论
    公告
    中国晚上好,随时随地分享前沿科技,好吃好玩,有趣有料的新鲜事;本站可以分享资源,技术,观点,态度;同时希望大家做一个文明的分享者!
    广告
    pytorch中文网