我在首页中创建了一个子页面,是一个列表的页面,但是在主页的显示方式有问题,列表无法滚动,而且底部的导航栏也不固定了
<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>
这是列表页的代码
运行效果是这样的
有人可以帮忙吗
8***@qq.com (作者)
就是主页的列表项有很多,但是看不到下面的列表项,主页代码是一个侧滑栏加底部栏的组件
2016-10-26 20:03
赵梦欢
回复 8***@qq.com: 再仔细看看hello mui中的demo,确实无解可以放上测试工程。
2016-10-26 20:07