我想要更改下拉刷新的样式，如图：
龙傲天
- 发布：2017-07-05 11:37
- 更新：2017-07-24 12:32
- 阅读：1675
wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件
https://github.com/mescroll/mescroll.git
样式需要自己写
css3 动画 这个你应该会~
wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件
mui侧滑菜单最精简的案例代码--列表的滑动是用的mui-scroll-wrapper区域滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="mui.min.css">
<style type="text/css">
.datalist li{height: 120px;}
</style>
</head>
<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!--菜单-->
<aside class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<!--菜单内容-->
<div class="mui-scroll">
<p id="offCanvasHide">点我关闭</p>
</div>
</div>
</aside>
<!--主页面-->
<div class="mui-inner-wrap">
<!--主页面标题-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">左滑导航</h1>
</header>
<!--主页面内容-->
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<p id="offCanvasShow">点我显示</p>
<ul class="datalist">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
mui.init({ swipeBack: false });
mui.ready(function() {
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//显示
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
//关闭
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
})
</script>
</html>wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件
mui侧滑菜单最精简的案例代码--列表的滑动是用div原生的overflow:auto; 不使用mui-scroll-wrapper区域滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="mui.min.css">
<style type="text/css">
.datalist li{height: 120px;}
/*不使用区域滚动,使用div原生的overflow滚动*/
.mui-scroll-wrapper{overflow: auto;}
</style>
</head>
<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!--菜单-->
<aside class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<!--菜单内容-->
<!--不使用区域滚动 <div class="mui-scroll">-->
<p id="offCanvasHide">点我关闭</p>
<!--</div>-->
</div>
</aside>
<!--主页面-->
<div class="mui-inner-wrap">
<!--主页面标题-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">左滑导航</h1>
</header>
<!--主页面内容-->
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<!--不使用区域滚动 <div class="mui-scroll">-->
<p id="offCanvasShow">点我显示</p>
<ul class="datalist">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>
<!--</div>-->
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
mui.init({ swipeBack: false });
mui.ready(function() {
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//显示
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
//关闭
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
});
//不使用区域滚动
// mui('#offCanvasSideScroll').scroll();
// mui('#offCanvasContentScroll').scroll();
})
</script>
</html>wenju - https://www.mescroll.com -- 精致的下拉刷新和上拉加载组件
@龙傲天 我看您发我邮箱的源码,发现你是同时使用了mui的区域滚动,而mescroll使用的是div原生overflow:auto;
mui的区域滚动是设置mui-scroll-wrapper的overflow:hidden,再配合mui.js实现
而mescroll则是overflow:auto,仅此
在列表滚动方面两者不同的实现方式,只能选其一,
详解: https://ask.dcloud.net.cn/article/529
杨婆婆管家家
链接打不开
2017-07-07 11:44
龙傲天 (作者)
用完页面不能拖动了
2017-07-19 14:36
龙傲天 (作者)
@1799158837@qq.com:可以用鼠标滚轮，但不能用拖动，手机上电脑上都不能
2017-07-19 14:43