【转】使用MUI，中间内容区高度自适应问题

原文地址：http://ask.dcloud.net.cn/question/2683

头部使用<header class="mui-bar mui-bar-nav">
底部使用<nav class="mui-bar mui-bar-tab">
中间<div class="mui-content">但<div class="mui-content">区域不能自适应高度，是要动态去算？还是mui有解决方法呢？

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/mui.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/Common.js"></script>
        <link href="css/mui.css" rel="stylesheet" />
        <style>
            html,#slider,.mui-content{
                width: 100%;
                height: 100%;
            }
            body{
                margin-top: 45px;
                width: 100%;
                height: calc(100% - 45px);
            }
            .mui-slider-group{
                height: calc(100% - 45px);
            }
            .mui-control-content {
                background-color: white;
            }

            .mui-control-content .mui-loading {
                margin-top: 50px;
            }
        </style>
    </head>

    <body>
        <div class="mui-inner-wrap">
            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">IQC检验</h1>
                <a class="mui-icon mui-icon-home mui-pull-right"></a>
            </header>
        </div>
        <div class="mui-content">
            <div id="slider" class="mui-slider">
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
                    <a class="mui-control-item mui-active" 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 id="scroll1" class="mui-scroll-wrapper">
                            <div class="mui-scroll">
                                <ul class="mui-table-view">
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-1
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-2
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-3
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-4
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-5
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-6
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-7
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-8
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-9
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-10
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-11
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-12
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-13
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-14
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-15
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-16
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-17
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-18
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-19
                                    </li>
                                    <li class="mui-table-view-cell">
                                        第一个选项卡子项-20
                                    </li>
                                </ul>
                            </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>
            </div>
        </div>
    </body>
    <script>
        var ReceivingNo
        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            ReceivingNo = self.ReceivingNo;
        })

        mui.init({
            swipeBack: false
        });
        (function($) {
            $('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });
            var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';

            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;
                        }, 500);
                    }
                }
            });
        })(mui);
    </script>

</html>

 

posted @ 2018-08-17 14:07  花影疏帘  阅读(258)  评论(0)    收藏  举报