8***@qq.com
8***@qq.com
  • 发布:2016-10-26 19:00
  • 更新:2016-10-26 19:58
  • 阅读:1078

在页面中创建子页面的问题

分类:MUI
mui

我在首页中创建了一个子页面,是一个列表的页面,但是在主页的显示方式有问题,列表无法滚动,而且底部的导航栏也不固定了

<script>  
    mui.init({  
            subpages:[{  
              url:'bookList.html',  
              id:'bookList.html',  
              styles:{  
                top:'45px'  
              },  
              extras:{}  
            }]  
        });  
</script>

这是主页的代码

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>  
        <div class="mui-input-row mui-search">  
            <input type="search" class="mui-input-clear input-book-search" placeholder="输入书名">  
        </div>  
        <ul class="mui-table-view mui-scroll-wrapper">  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-1.jpg">  
                    <div class="mui-media-body">  
                        java设计  
                        <p class="mui-ellipsis">一本详细介绍java的书</p>  
                        <p class="mui-ellipsis book-price">¥30.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media book-item">  
                <a href="javascript:;" class="mui-navigate-right">  
                    <img class="mui-media-object mui-pull-left" src="image/book-2.jpg">  
                    <div class="mui-media-body">  
                        c#高级编程  
                        <p class="mui-ellipsis">c#经典书籍</p>  
                        <p class="mui-ellipsis book-price">¥124.8</p>  
                    </div>  
                </a>  
            </li>  
        </ul>  
    </body>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript">  
        mui.init()  
    </script>  

</html>

这是列表页的代码
运行效果是这样的
有人可以帮忙吗

2016-10-26 19:00 负责人:无 分享
已邀请:
赵梦欢

赵梦欢 - 专注前端,乐于分享!

贴出主页面的详细代码。另外没有看清楚你所说的列表无法滚动的问题。

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

    就是主页的列表项有很多,但是看不到下面的列表项,主页代码是一个侧滑栏加底部栏的组件

    2016-10-26 20:03

  • 赵梦欢

    回复 8***@qq.com: 再仔细看看hello mui中的demo,确实无解可以放上测试工程。

    2016-10-26 20:07

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