天眼
天眼
  • 发布:2015-11-25 09:50
  • 更新:2015-11-25 09:50
  • 阅读:4677

mui 使用nav滑动,列表页面无法正常滚动

分类:MUI

我用mui开发微信端的平台

当使用nav滑动的页面显示的时候,下拉列表页在安卓下可以滚动,但是在苹果下滚动出现卡动和无法滚动现象。

我研究了一下,这应当是mui兼容性问题,mui功能挺强的,但是很多时候感觉使用比较茫然,例如页面切换或者tab切换,既有webviews和div两种形式,webviews 还不兼容手机浏览器,好像只能在app中使用。

另外,采用mui-views.js 插件做页面切换的时候感觉太麻烦了。需要建立一个

<!--页面主结构开始-->  
    <div id="app" class="mui-views">  
        <div class="mui-view">  
            <div class="mui-navbar">  
            </div>  
            <div class="mui-pages">  
            </div>  
        </div>  
    </div>  
<!--页面主结构结束-->  

然后再建立N个子页,这样会不会存在兼容性问题?
参考我做的页面程序 http:://wei.edalian.com/localnews.php 用微信打开

<!--即时新闻开始-->
<div id="nownews" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<h5 class="mui-center mui-title">{$ntitle}</h5>
<a id="showdatePicker" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">时间</a>
</div>
<!--页面标题栏结束-->
<!--页面主内容区开始-->
<div class="mui-page-content">
<!--<div id='dateResult' class="ui-alert"></div>-->
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">今日新闻</a>
<a class="mui-control-item" href="#item2mobile">大连日报</a>
<a class="mui-control-item" href="#item3mobile">大连晚报</a>
<a class="mui-control-item" href="#item4mobile">新商报</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
<div class="mui-slider-group">
<!--即时新闻-->
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>

                <div id="item2mobile" class="mui-slider-item mui-control-content">  
                    <div id="scroll2" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <div class="mui-loading">  
                                <div class="mui-spinner">  
                                </div>  
                            </div>  
                        </div>  
                    </div>  

                </div>  
                <div id="item3mobile" class="mui-slider-item mui-control-content">  
                    <div id="scroll3" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <div class="mui-loading">  
                                <div class="mui-spinner">  
                                </div>  
                            </div>  
                        </div>  
                    </div>  

                </div>  
                <div id="item4mobile" class="mui-slider-item mui-control-content">  
                    <div id="scroll4" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <div class="mui-loading">  
                                <div class="mui-spinner">  
                                </div>  
                            </div>  
                        </div>  
                    </div>  

                </div>  

            </div>  
        </div>  
                <!--<div class="mui-scroll">  
            <div style="padding: 10px 10px;">  
                <div id="segmentedControl" class="mui-segmented-control">  
                    <a class="mui-control-item mui-active" href="#newstype1" ntype="1" >  
                即时  
            </a>  
                    <a class="mui-control-item" href="#newstype4"  ntype="4" >  
                新商报  
            </a>  
            <a class="mui-control-item" href="#newstype2"  ntype="2"  >  
                日报  
            </a>  
            <a class="mui-control-item" href="#newstype3"  ntype="3" >  
                晚报  
            </a>        
            <a class="mui-control-item" href="#newstype5"  ntype="5" >  
                新闻推荐  
            </a>  
                </div>  
            </div>  

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

                </ul>  

                </div>-->  

        </div>  
    </div>  
<!--/即时新闻开始-->
2015-11-25 09:50 负责人:无 分享
已邀请:

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