3***@qq.com
3***@qq.com
  • 发布:2018-04-24 09:27
  • 更新:2018-04-24 14:07
  • 阅读:2591

mui 选项卡切换 与图片轮播组件冲突

分类:HTML5+

MUI 多选项卡切换与图片轮播放一起就冲突了,现在滑动只能显示整个选项卡的滑动,但是在热点精选这个图片轮播上滑动一点效果都没有,本地浏览器静态页面滑动是可以的,只是在IOS模拟器中或是手机上就不行了。麻烦谁有遇到过?怎么处理?找了好久没找到解决方案

<!-- 正文内容 start -->  
        <div class="mui-content bg-white">  
            <div id="slider-menu" class="mui-slider mui-fullscreen">  
                <!--导航栏 start-->  
                <div id="Menu" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item mui-active" 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>  
                    <a class="mui-control-item" href="#item5mobile">公司</a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2"></div>  
                <!--导航栏 end-->  
                <!---->  
                <div class="mui-slider-group" style="bottom:0;">  
                    <!--内容1 start-->  
                    <div id="item0mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll0" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                 <!--热点精选 start-->  
                                <div class="mui-slider news-hot" id="news_hot" style="display:block;">  
                                    <div class="h-top"><i class="iconfont icon-remen"></i><span>热点精选</span></div>  
                                    <div class="h-btn h-left"><i class="iconfont icon-jiantou1"></i></div>  
                                    <div class="h-btn h-right"><i class="iconfont icon-jiantou"></i></div>  
                                    <div class="mui-slider-group">  
                                        <div class="mui-slider-item h-items open-window1" v-for="list in data.items" view-url="./news_content.html" view-id="news_content" :data-id="list.id">  
                                            <div class="hi-img"><img src="./public/images/arc1.jpg" /></div>  
                                            <div class="hi-other">  
                                                <p class="tit">{{list.title}}</p>  
                                                <p class="source"><span>{{list.source}}</span><em>·</em><span>{{list.add_time_name}}</span><em>·</em><span>{{list.pageviews}}阅</span></p>  
                                            </div>  
                                        </div>  
                                    </div>  
                                    <div class="h-more">  
                                        <span>查看更多热点事件<em><i class="iconfont icon-jiantou"></i></em></span>  
                                    </div>  
                                </div>  
                                <div class="news-line"></div>  
                                <!--热点精选 end-->  
                                <div class="news-box" id="item-box" style="display:none;">  
                                    <div v-for="list in data" class="n-item clear open-window" view-url="./news_content.html" view-id="news_content" :data-id="list.id+'_'+list.type_id">  
                                        <div class="n-info">  
                                            <p class="title">{{list.title}}</p>  
                                            <p class="clear"><span>{{list.type_name}}</span><span class="i-view">{{list.pageviews}}<i class="iconfont icon-chakan-copy"></i></span><span class="i-time">{{list.add_time_name}}</span></p>  
                                        </div>  
                                        <div class="n-pic"><img v-bind:src="list.thumbs_url" /></div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <!--内容1 end-->  
                    <!--内容2 start-->  
                    <div id="item1mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="news-box">  
                                    <div v-for="list in data" class="n-item clear open-window" view-url="./news_content.html" view-id="news_content" :data-id="list.id+'_'+list.type_id">  
                                        <div class="n-info">  
                                            <p class="title">{{list.title}}</p>  
                                            <p class="clear"><span>{{list.type_name}}</span><span class="i-view">{{list.pageviews}}<i class="iconfont icon-chakan-copy"></i></span><span class="i-time">{{list.add_time_name}}</span></p>  
                                        </div>  
                                        <div class="n-pic"><img v-bind:src="list.thumbs_url" /></div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <!--内容2 end-->  
                    <!--内容3 start-->  
                    <div id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="news-box">  
                                    <div v-for="list in data" class="n-item clear open-window" view-url="./news_content.html" view-id="news_content" :data-id="list.id+'_'+list.type_id">  
                                        <div class="n-info">  
                                            <p class="title">{{list.title}}</p>  
                                            <p class="clear"><span>{{list.type_name}}</span><span class="i-view">{{list.pageviews}}<i class="iconfont icon-chakan-copy"></i></span><span class="i-time">{{list.add_time_name}}</span></p>  
                                        </div>  
                                        <div class="n-pic"><img v-bind:src="list.thumbs_url" /></div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <!--内容3 end-->  
                    <!--内容4 start-->  
                    <div id="item3mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll3" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="news-box">  
                                    <div v-for="list in data" class="n-item clear open-window" view-url="./news_content.html" view-id="news_content" :data-id="list.id+'_'+list.type_id">  
                                        <div class="n-info">  
                                            <p class="title">{{list.title}}</p>  
                                            <p class="clear"><span>{{list.type_name}}</span><span class="i-view">{{list.pageviews}}<i class="iconfont icon-chakan-copy"></i></span><span class="i-time">{{list.add_time_name}}</span></p>  
                                        </div>  
                                        <div class="n-pic"><img v-bind:src="list.thumbs_url" /></div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <!--内容4 end-->  
                    <!--内容5 start-->  
                    <div id="item4mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll4" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="news-box">  
                                    <div v-for="list in data" class="n-item clear open-window" view-url="./news_content.html" view-id="news_content" :data-id="list.id+'_'+list.type_id">  
                                        <div class="n-info">  
                                            <p class="title">{{list.title}}</p>  
                                            <p class="clear"><span>{{list.type_name}}</span><span class="i-view">{{list.pageviews}}<i class="iconfont icon-chakan-copy"></i></span><span class="i-time">{{list.add_time_name}}</span></p>  
                                        </div>  
                                        <div class="n-pic"><img v-bind:src="list.thumbs_url" /></div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <!--内容5 end-->  
                </div>  
                <!---->  
            </div>  
        </div>  
        <!-- 正文内容 end -->
2018-04-24 09:27 负责人:无 分享
已邀请:
追梦随想

追梦随想

href="#item1mobile" 从1开始
id="item0mobile" 从0开始,貌似对不上吧
我也不知道是不是这个原因,试试吧

  • 3***@qq.com (作者)

    我的就是从0开始,不是这个问题。

    2018-04-24 11:59

追梦随想

追梦随想

你贴的代码一个从0开始,一个从1 开始。。。
另外轮播图和滑动选项卡是可以放在一个页面的,我的项目就有,完全没问题。
要检查下id是否重复,这是基本常识

细嗅蔷薇

细嗅蔷薇 - 专注于App的开发和代上架合作,带需求来聊,有需求请加QQ:1481983952

我经常这样用,也没出现问题啊

  • 1***@qq.com

    轮播图左右滑动和页面冲突 你有遇到过吗?

    2018-11-01 10:50

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