风云酷小子
风云酷小子
  • 发布:2015-03-29 17:49
  • 更新:2018-01-22 11:23
  • 阅读:6381

列表增加了 mui-scroll-wrapper 之后,不能拖动了

分类:MUI

html页面如下

        <!--下拉刷新用的-->  
        <div id="refreshContainer" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--真正的内容-->  
                <ul class="mui-table-view" id="list">  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  
                    <li class="mui-table-view-cell mui-media">  
                        <a href="#">  
                            <img class="mui-media-object mui-pull-left" src="image/wifi.png">  
                            <div class="mui-media-body">  
                                幸福  
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>  
                            </div>  
                        </a>  

                    </li>  

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

js代码如下

/*设置下拉刷新*/  
                setTimeout(function() {  
                    mui.init({  
                        gestureConfig: {  
                            tap: true, //默认为true  
                            doubletap: true, //默认为false  
                            longtap: true, //默认为false  
                            swipe: true, //默认为true  
                            drag: true, //默认为true  
                            hold: true, //默认为false,不监听  
                            release: true //默认为false,不监听  
                        },  
                        swipeBack: false,  
                        pullRefresh: {  
                            container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
                            down: {  
                                callback: pulldownRefresh  
                            }  
                        }  
                    });  
                }, 500);

这样的话,不但下拉不动,连列表滑动都不行了

把 .mui-scroll-wrapper 去掉,就能滑动了

把官方demo复制过来,又行,我郁闷

而且console又不报错

2015-03-29 17:49 1 条评论 负责人:无 分享
已邀请:
风云酷小子

风云酷小子 (作者) - 苦逼的全栈

这是我发的问题????

我啥时候做过一个东西,里面有“能和心爱的人一起睡觉”。。。。奇怪

DCloud_UNI_FXY

DCloud_UNI_FXY

发个测试工程。

随风1234

随风1234

这个问题解决没,我也遇到了

回到过去

回到过去

我现在也遇到了,是什么问题?

BoredApe

BoredApe - 有问题就会有答案。

动态创建需要初始化scroll控件
mui('.mui-scroll-wrapper').scroll({

});

  • 回到过去

    $('.mui-scroll-wrapper').scroll({

    indicators: true //是否显示滚动条

    });

    已经加入这段代码了,但是上下滑动依然不好用

    2016-01-22 14:24

  • BoredApe

    发个能重现问题的测试工程

    2016-01-22 14:27

  • AlvinChim

    回复 回到过去:上下滑动是否是有卡顿

    2016-03-17 16:14

ypf

ypf

请问后来怎么解决的下拉刷新问题。

l***@qq.com

l***@qq.com

我也遇到同样问题,怎么弄就是不滚动,百度了一下也有人遇到类似问题,没有人回复正确的解决办法。

l***@qq.com

l***@qq.com

请问后来怎么解决的下拉刷新问题。

Lspring

Lspring -

这个好像需要设置top和position属性才有效果

马振丹

马振丹

script加下面代码
mui(".mui-scroll-wrapper").scroll({
bounce: false, //滚动条是否有弹力默认是true
indicators: false, //是否显示滚动条,默认是true
deceleration: mui.os.ios ? 0.0003 : 0.0009 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
});

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