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 条评论负责人:无分享

8 个回复

BoredApe - 有问题就会有答案。

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

问问你 (作者)

对的

2017-06-09 10:59

S_eVent

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

String

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

2017-02-10 15:27

9***@qq.com

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

1***@qq.com

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

问问你 (作者)

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

Ricky_Cslg

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

2017-09-06 10:19

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 - 刚入门的程序员~~

回复 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');  

    });

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

tabslide.zip

String

你自己实现的?

2017-09-07 16:14
Ricky_Cslg

回复 String: ?? 什么

2017-09-07 16:23

wnsuan

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

String

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

2017-09-29 15:15

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

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

8 个回复

公告

相关问题

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

与内容相关的链接

8 个回复

公告

相关问题