问问你
问问你
  • 发布:2015-10-23 11:17
  • 更新:2017-09-26 20:13
  • 阅读:2626

pullrefresh_with_tab 栏目及列表动态加载后在列表滑动,栏目不会跟着滑。。

分类:MUI
<div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control ui-segmented-control-inverted">  
                                       <!--这个里面做了动态加载 --------栏目-->  
                    <div class="mui-scroll">  

                        <!--内容是这些,第一个加上mui-active  
<a class="mui-control-item mui-active" href="#">  
                            推荐  
                        </a>-->  
                    </div>  
                </div>  
                <div id="sliderSegmentedControlItems" 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">  
                                <ul class="mui-table-view">  

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

                </div>  
            </div>

使用js在上面动态加载html代码后,下拉刷新,滑动切换,都可以用了。但是上面栏目不会随下面内容列表滑动而变换。只有在栏目上先滑一下,然后就有效果了。。请问这是什么情况?

2015-10-23 11:17 2 条评论 负责人:无 分享
已邀请:
五块钱的果汁

五块钱的果汁 - 勤奋是一种被逼无奈 - 热爱是一种情不自禁~

需要完整动态生成slider DOM结构.在初始化

S_eVent

S_eVent

尝试着在slider中DOM内容动态生成完毕后手动再次调用一下mui("slider").slider()方法来生成一次Slider组件

  • String

    没用唉...还有其他方法吗?

    2017-02-10 15:27

995750649@qq.com

995750649@qq.com

你好,我想问一下,这个问题你解决了么,我刚开始接触这个,也遇到了类似的问题,你能把解决方案贴一下么

137297350@qq.com

137297350@qq.com

你好,我也遇到这问题?能分享下你这个问题的解决方法吗?谢谢了

问问你

问问你 (作者)

解决方法上面那位大神已经说过了。。就是完整动态生成slider DOM结构.在初始化

  • Ricky_Cslg

    初始化的代码是mui("#slider").slider();吗? 我初始化了还是不行,还是需要手点一下才行,能不能贴一下你的解决的那一段代码吗? 谢谢了

    2017-09-06 10:19

Ricky_Cslg

Ricky_Cslg - 刚入门的程序员~~

初始化的代码是mui("#slider").slider();吗? 我初始化了还是不行,还是需要手点一下才行,能不能贴一下你的解决的那一段代码吗? 谢谢了

  • String

    那是因为 那个a标签 没有宽度...你给他设置个宽度就好了.不用什么重置函数

    2017-09-06 11:34

  • String

    动态放入的dom 是在初始化后放入的所以它的宽度没有初始化.

    2017-09-06 11:35

  • Ricky_Cslg

    回复 String:请问,添加宽度可以在动态添加的时候加上宽度的style这样添加吗? 我加了个min-width, 但滑动的时候还是没有跟着内容列表页滑动

    2017-09-06 11:46

  • String

    容器~~

    2017-09-06 11:47

  • String

    a标签要宽度 容器也要啊.

    2017-09-06 11:47

Ricky_Cslg

Ricky_Cslg - 刚入门的程序员~~

回复 String:

我把我代码贴一段你帮我看看好不?我加了宽度还是不行,

这是容器的地方

<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="category" class="mui-scroll" style="min-width: 50px;">  

                    <!--这是选项卡栏目,就是这里无法跟着内容列表滑动-->  
                </div>  
                <div style="margin-top: 40px;width: 100%;height: 40px;background-color: #FFF;margin-bottom: 0px;">  
                    <select style="float: left; width: 30%;margin-bottom: 0px;height: 40px;">  
                        <option value="volvo">综合排序</option>  
                        <option value="saab">信用</option>  
                        <option value="opel">价格由高到低</option>  
                        <option value="audi">价格由低到高</option>  
                    </select>  
                    <span style="float: left;width: 40%;line-height: 40px;height: 40px;">销量优先</span>  
                    <!--<span class="mui-icon mui-icon-refreshempty" style="border:1px solid #fff;" onclick="refresh()"></span>-->  
                </div>  
            </div>

这是动态添加的代码:

$(function (){  
        var params = {};  
        var url = 'http://tbqc.weiyucheye.com/index.php/Home/Cate';  
        $.post(url, params, function(d){  
            $("#category").empty();  
            $.each(d.items_cate,function(i,val){              
                if(i == 0){  
                    var index = i;  
                    var listid ="item"+ index +"mobile";   
                    var html = '<a class="mui-control-item mui-active" href="#'+listid+'" style="min-width:20px">' + val.name + '</a>';  
                    $("#category").append(html);  
                    mui("slider").slider();  
                    mui(".mui-scroll-wrapper").scroll();  
                    $.each(val.list, function(j,vbl) {  
                        if(vbl.shop_type == "C"){  
                            var shoptype = "淘宝";  
                        }  
                        if(vbl.shop_type == "B"){  
                            var shoptype = "天猫"  
                        }  
                        // 动态加载选项卡导航  
                        var html = '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="'+vbl.quanurl+'"><img class="mui-media-object" src="'+vbl.pic_url+'"><div class="mui-media-body">'+vbl.title+'</div><div class="goods_info"> <span class="price_info">¥'+vbl.coupon_price+'</span> <span class="fav_num" style="float: right;">'+shoptype+'</span></div></a></li>';  
                        var copyid = index+"commodity";  
                        $("#"+ copyid+ "").append(html);  
                    });  
                }else{  //动态添加选项卡容器  
                    var index = i;  
                    var listid ="item"+ index +"mobile";   
                    var html = '<a class="mui-control-item" href="#'+listid+'" style="min-width:20px">' + val.name + '</a>';  
                    $("#category").append(html);  
                    mui("slider").slider();  

                    //添加选项卡容器的对应的内容  
                    var html = '<div id="item'+index+'mobile" class="mui-slider-item mui-control-content"><div  class="mui-scroll-wrapper" ><div class="mui-scroll"><ul class="mui-table-view mui-grid-view" id="'+index+'commodity"></ul></div></div></div>'  
                    $("#itembox").append(html);  
                    mui("slider").slider();  
                    mui(".mui-scroll-wrapper").scroll();  
                    $.each(val.list, function(j,vbl) {  
                        if(vbl.shop_type == "C"){  
                            var shoptype = "淘宝";  
                        }  
                        if(vbl.shop_type == "B"){  
                            var shoptype = "天猫"  
                        }  
                        var html = '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="'+vbl.quanurl+'"><img class="mui-media-object" src="'+vbl.pic_url+'"><div class="mui-media-body">'+vbl.title+'</div><div class="goods_info"> <span class="price_info">¥'+vbl.coupon_price+'</span> <span class="fav_num" style="float: right;">'+shoptype+'</span></div></a></li>';  
                        var copyid = index+"commodity";  
                        $("#"+ copyid+ "").append(html);  
                    });  

                }  

            });  

        }, 'json');  

    });

附件是源代码。 谢谢了。这个我真的头疼了。。

wnsuan

wnsuan

请问你解决了吗?我也遇到同样的问题

  • String

    解决了,,写死 设置好高度与宽度 动态改文本内容

    2017-09-29 15:15

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