mui .mui-control-item 选项卡高度怎么自适应内容高度?

发布于 2022-09-05 10:45:18 字数 4338 浏览 21 评论 0

<div id="slider" class="mui-slider pdu_detail">
        <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>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="scroll1">
                    <div class="mui-scroll">
                        <div><img src="../../img/list/girl.png" alt=""></div>
                        <div><img src="../../img/list/girl.png" alt=""></div>
                        <div><img src="../../img/list/girl.png" alt=""></div>
                        <div><img src="../../img/list/girl.png" alt=""></div>
                        <div><img src="../../img/list/girl.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="scroll2">
                    <div class="mui-scroll">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

     <script type="text/javascript">
            var slider = mui("#slider");
            slider.slider({
                interval: 1000
            });
    
            mui.init({
                swipeBack: false
            });
    
            (function($) {
                var html2 = '<h1 onreadystatechange="alert(1)">hello world</h1>';
                var item1 = document.getElementById('item1mobile');
                var item2 = document.getElementById('item2mobile');
                document.getElementById('slider').addEventListener('slide', function(e) {
                    if (e.detail.slideNumber === 1) {
                        if (item2.querySelector('.mui-loading')) {
                            setTimeout(function() {
                                item2.querySelector('.mui-scroll').innerHTML = html2;
                                // $(item2.querySelector('.mui-scroll')).load(html2, function() {
                                //     console.log('ccc');
                                // });
    
                                // item1.setAttribute("style", "");
                            }, 500);
                        }
                    }
                });
            })(mui);
    
            $(function() {
                var part1tab = $("#item1mobile .mui-scroll").height();
                var part2tab = $("#item2mobile .mui-scroll").height();
                $("#item1mobile").height(part1tab);
                $("#item2mobile").height(part2tab);
    
                // var tabc = $(".pdu_detail .mui-slider-group > div");
                // $.each(tabc, function(i) {
                //     var curH = tabc.height();
                //     console.log(curH);
                //     // tabc.eq(i).height(curH);
    
                //     console.log(tabc);
                // });
    
            });
    
            mui(document).on("tap", ".mui-control-item", function() {
                // alert(123);
                var that = $(this);
                var str_href = that.attr("href");
                console.log(that.siblings().attr("href"));
                var tdom = that.siblings().attr("href");
                $(tdom).attr("style", "");
                var ss = str_href.substring(1, str_href.length);
                // console.log(ss);
            });
        </script>
        
        
        

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文