<!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>
<header class="mui-bar mui-bar-nav">
<a class="mui-tab-item" href="login.html" style=" float: right;">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">登录</span>
</a>
<h1 id="title" class="mui-title">首页</h1>
</header>
<!--中间内容-->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll ">
<!--轮播图-->
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--第一个内容区容器-->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="image/004.png" /></a>
<!-- 具体内容 -->
</div>
<!--第二个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#"><img src="image/001.png" /></a>
</div>
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#"><img src="image/002.png" /></a>
</div>
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#"><img src="image/003.png" /></a>
</div>
<div class="mui-slider-item">
<!-- 具体内容 -->
<a href="#"><img src="image/004.png" /></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="image/001.png" /></a>
<!-- 具体内容 -->
</div>
</div>
<!--圆圈-->
<div class="mui-slider-indicator ">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<!--图文列表-->
<!--列表-->
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="image/logo.png">
<div class="mui-media-body">
分时度假
<p class='mui-ellipsis'>框架郭德纲发达国家法定考虑空间裂缝的</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="image/logo.png">
<div class="mui-media-body">
富华大厦
<p class='mui-ellipsis'>士大夫好吧四大皆空符合急麾兵地方见过</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="image/logo.png">
<div class="mui-media-body">
分时度假
<p class='mui-ellipsis'>框架郭德纲发达国家法定考虑空间裂缝的</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="image/logo.png">
<div class="mui-media-body">
富华大厦
<p class='mui-ellipsis'>士大夫好吧四大皆空符合急麾兵地方见过</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="image/logo.png">
<div class="mui-media-body">
富华大厦
<p class='mui-ellipsis'>士大夫好吧四大皆空符合急麾兵地方见过</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-contact.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="tab-webview-subpage-setting.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<script>
var gallery = mui('.mui-slider');
gallery.slider({
interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
});
//这是上拉下拉刷新的事件
//mui('.mui-scroll-wrapper').scroll({
//
// deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// });
</script>
</body>
</html> 
ac9527
- 发布：2016-08-27 09:33
- 更新：2017-11-27 20:47
- 阅读：11704
3 个回复
最佳回复
Trust - 少说废话
请参阅scroll文档scroll控件需要初始化。
5***@qq.com
我也遇到了这个问题,还没有解决
蓝蓝的青金石
我也遇到这个问题了，使用jquery动态append数据到区域末尾，不能滚动到底部。看代码找到解决方法了：
var scroll=mui('.mui-scroll-wrapper').scroll();//初始化
scroll.refresh();//高度变化后，刷新滚动区域高度
scroll.scrollToBottom(100);//100毫秒后滚动到底部
1***@qq.com
还是不行啊~，append的内容多次加载~
2018-02-27 19:58