1***@163.com
1***@163.com
  • 发布:2017-10-25 17:08
  • 更新:2017-10-25 17:08
  • 阅读:7855

关于mui的两个上拉加载下拉刷新遇到的几个问题

分类:MUI

第一种方式,无需插件,但是页面不能通过url传参,会起冲突。
冲突效果:页面不能滑动,且在日志里报错。如图所示
代码结构
解决的方式
1、可以将传参的内容通过mui.openwindow()跳转页面传参
2、可以用localStorage进行存储,跳转后取出使用后并再销毁
html
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" >
<div class="mui-scroll">

            <ul class="mui-table-view">   

            </ul>                                                                                                               
        </div>  
    </div>  

js
mui.init({
pullRefresh: {
container: '#pullrefresh' ,
up: {
contentrefresh : "正在加载中...",
callback: ajax_allAddress //自定义加载方法
}
}
});
第二种方式,需要mui的上拉下拉组件,但是那中刷新方式会激活mui.back返回上一页的刷新页面代码
冲突效果:滑动时会导致refresh的自定义代码运行导致页面闪烁
上拉下拉组件
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
监听父页面js
mui.init({
beforeback: function() {
     //获得父页面的webview
var list = plus.webview.currentWebview().opener(); //返回的页面
     //触发父页面的自定义事件(refresh),从而进行刷新
mui.fire(list, 'refresh');
//返回true,继续页面关闭逻辑
return true;
}
});
父页面刷新js
//监听页面刷新
window.addEventListener("refresh",function(e){
function1();//自定义部分
});
父页面上拉加载html结构
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div id="my_order_top" class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile" data-value="1">
已保存
</a>
<a class="mui-control-item" href="#item2mobile" data-value="2">
已提交
</a>
<a class="mui-control-item" href="#item3mobile" data-value="3">
已完成
</a>
</div>
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="orderSheet_list" id="orderSheet_list1">

                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="orderSheet_list" id="orderSheet_list2">  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="item3mobile" class="mui-slider-item mui-control-content">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="orderSheet_list" id="orderSheet_list3">  
                            </ul>  
                        </div>  
                    </div>  
                </div>          
            </div>  
        </div>  
    </div>  

父页面上拉加载js结构
//阻尼系数
var deceleration = mui.os.ios?0.003:0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration:deceleration
});
//循环初始化所有下拉刷新,上拉加载。
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
up: {
callback: function() {
var self = this;
setTimeout(function() {
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
解决的方式
1、不使用refresh监听事件
2、选用第一种刷新方式
3、修改组件源码

0 关注 分享

要回复文章请先登录注册