DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-06-22 19:01
  • 更新:2020-12-05 14:52
  • 阅读:16117

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

分类:MUI

在很多资讯类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);  
}
8 关注 分享
lhyh Trust amourz 1***@qq.com 8***@qq.com 1***@qq.com lifeng_dev 2***@qq.com

要回复文章请先登录注册

5***@qq.com

5***@qq.com

我的怎么试了都没用
2020-12-05 14:52
lifeng_dev

lifeng_dev

大佬666
2019-10-25 08:34
amourz

amourz

不错
2017-06-23 16:21