zxd
zxd
  • 发布:2016-03-30 19:10
  • 更新:2019-02-27 12:39
  • 阅读:3663

mui点击跳转后,下拉失效的问题

分类:MUI
mui

我现在有个导航栏,点击后是同一页面,只是数据不同,点击后,下拉刷新就不能使用了,后退后也不能使用了,

下面是代码 html代码

<header class="mui-bar mui-bar-nav">  
            <div id="head">  
                <a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
                <h1 id="title" class="mui-title">下拉刷新和上拉加载更多</h1>  
            </div>  
            <div class="nav">  
                <div class="nav-wrap swiper-scroll">  
                    <div class="shadow-le"></div>  
                    <div class="shadow-ri"></div>  
                    <div class="wrap swiper-container">  
                        <ul class="swiper-wrapper " id="pullupdown">  
                            <li class="swiper-slide current"><a href="index.html?id=1">1</a></li>  
                            <li class="swiper-slide current"><a href="index.html?id=2">2</a></li>  
                            <li class="swiper-slide current"><a href="index.html?id=3">3</a></li>  
                            <li class="swiper-slide current"><a href="index.html?id=4">4</a></li>  
                        </ul>  
                        <!-- Add Scrollbar -->  
                        <div class="swiper-scrollbar"></div>  
                    </div>  
                </div>  
            </div>  
        </header>  
        <div class="mui-content"></div>

页面就是这样,

第一次是正常的,可以上拉、下拉,但是点击后面的2,3,4随意一个页面后,就下拉不动了,返回后,第一次的下拉也不行了,求大神们解释下,或者给个更好的方案。跪谢了!!!!!

2016-03-30 19:10 负责人:无 分享
已邀请:
6***@qq.com

6***@qq.com

解决了,以react为例:```javascript
componentDidMount() {
// 需要在mui.init之前加入一下代码
for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
item=mui.hooks.inits[i];
if(item.name=="pullrefresh"){
item.repeat=true;
}
}
mui.init({
pullRefresh : {
container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down : {
height:50,//可选,默认50.触发下拉刷新拖动距离,
auto: true,//可选,默认false.首次加载自动下拉刷新一次
contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback : () => {
console.log('pullRefresh callback')
this.initData()
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //refresh completed
} //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:false,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback : () => {
console.log('up callback')
this.getMore(20)
mui('#refreshContainer').pullRefresh().endPullupToRefresh(); //refresh completed
document.querySelector('.mui-pull-bottom-pocket').style.height = '0px'
} //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
}

  • 2***@qq.com

    多谢了,看了大半天只有你的是正确的解决

    2019-07-05 10:05

zxd

zxd (作者)

在线等啊,这个问题纠结了好久啊,解决不了了!!!

BoredApe

BoredApe - 有问题就会有答案。

上传一个测试工程

艾目UI虾客

艾目UI虾客

我也有这个问题,

因为是单页面操作,在列表页面初始化mui.init初始化上拉,下拉刷新代码,然后从其它页面切换回列表页面就会报一个错误。

knockout-3.3.0.min.js?v=1459487572402:66 Uncaught TypeError: Unable to process binding "event: function (){return {tap:initMuiScroll()} }"  
Message: Cannot read property 'classList' of undefined
艾目UI虾客

艾目UI虾客

第一次进入列表页面没有问题,通过路由再次进入列表页面就报上面这个错了。

9***@qq.com

9***@qq.com

我的也是这种问题 主页面 跳到另一个页面 然后返回刷新这个页面时,下拉刷新就不起作用了 有人知道怎么解决这个问题吗?

安小乐

安小乐

使用的是webview模式吗?应该不会的。
mui("#slider").on("tap", "a", function() {
var targetTab = this.getAttribute('href');

            if(targetTab == activeTab) {  
                return;  
            }  
            var self = plus.webview.currentWebview();  
            var sub = plus.webview.create(targetTab, targetTab, mainstyle);  
            self.append(sub);  
            //隐藏当前;    
            plus.webview.hide(activeTab); //这里应该是关闭页面,不知道隐藏与关闭区别有多大    
            //更改当前活跃的选项卡    
            activeTab = targetTab;  
        });
Raidenfc

Raidenfc

第一次进入列表页面没有问题

Raidenfc

Raidenfc

if(targetTab == activeTab) {  
return;  
}  
var self = plus.webview.currentWebview();  
var sub = plus.webview.create(targetTab, targetTab, mainstyle);  
self.append(sub);  
//隐藏当前;   
plus.webview.hide(activeTab); //这里应该是关闭页面,不知道隐藏与关闭区别有多大   
//更改当前活跃的选项卡   
activeTab = targetTab;  
});

该问题目前已经被锁定, 无法添加新回复