利用mui toast制作下拉刷新成功后的顶部提醒

在很多资讯类App中，下拉刷新后，会在顶部提示获取多少条更新内容，如今日头条：

mui要实现类似效果很简单，重写div模式的toast控件样式即可，先看基于Hello MUI中单webview下拉刷新示例改造后的结果：

代码实现

1、重写div模式toast控件样式

这部分实现主要包括：

• toast顶部显示
• 宽度修改为100%宽度
• 定制颜色

示例代码如下：

.mui-toast-container {  
    top: 0px; //顶部显示  
    left: 0;  
    width: 100%;//宽度修改为100%宽度  
    -webkit-transform:none;  
    transform: none;  
}  

.mui-toast-container.mui-active {  
    opacity: .7;  
}  

.mui-toast-message {  
    padding: 8px 15px;  
    background-color: #007AFF;//定制颜色  
    color: #fff;  
    border-radius: 0;  
    font-size: 13px;  
}

2、下拉刷新结束后，显示toast控件

/**  
 * 下拉刷新具体业务实现  
 */  
function pulldownRefresh() {  
    setTimeout(function() {  
        addData();//这里需要修改为具体业务代码，比如ajax请求  
        mui('#pullrefresh').pullRefresh().endPulldown();  
        mui.toast("Hello MUI推荐引擎有5条更新",{type:'div'});  
    }, 1500);  
}