mui单webview下拉刷新pullrefresh和上拉加载代码_APP开发,混合APP_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

mui单webview下拉刷新pullrefresh和上拉加载代码

来源：未知作者：类型：文章教程点击次数：发布时间：2018-01-05 15:53:46

下面的是mui单webview下拉刷新pullrefresh和上拉加载代码：
1、导航条页面：

01<header class="mui-bar mui-bar-nav">
02    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
03    <h1 class="mui-title">上拉刷新和下拉加载</h1>
04</header>
05 
06<script src="../js/mui.min.js"></script>
07<script type="text/javascript">
08mui.init({
09    swipeBack:true,
10    subpages:[{
11        url:'my-customer-list.html',
12        id:'my-customer-list',
13        styles:{
14            top:45,
15            bottom:0
16        }
17    }]
18})
19</script>

2、子页面：

01!--下拉刷新容器-->
02<div id="pullrefresh" class="mui-content">
03    <!--数据列表-->
04    <ul class="mui-table-view mui-table-view-chevron customer-list">
05        <li class="mui-table-view-cell">
06        </li>
07    </ul>
08</div>
09<script src="../js/mui.min.js"></script>
10<script type="text/javascript">
11mui.init({
12    pullRefresh: {
13        container: '#pullrefresh',
14        down: {
15            style:'circle',
16            callback: pulldownRefresh
17        },
18        up: {
19            //auto:true,
20            contentrefresh: '正在加载...',
21            callback: pullupRefresh
22        }
23    }
24});
25 
26var count = 0;
27function pulldownRefresh() {
28    //这里写刷新代码
29    mui.toast("下拉刷新");
30    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false);
31}
32function pullupRefresh() {
33    //这里写加载代码
34    mui.toast("上拉加载更多");
35    mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语；
36}
37</script>

我爱模板网在使用这个的时候，老是陷入一个固定思维，那就是既然可以上啦下拉，肯定需要用到mui的scroll区域拖拽滚动，就是那个外面套一个“<div class="mui-scroll-wrapper></div>”，里面套一个“<div class=" mui-scroll"=""></div>”，实际上不需要，只要使用了上拉刷新和下拉加载，滚动会自动加上。如果加上这个滚动，反而会和上拉刷新下拉加载冲突。

注（补充）：
经测试，最好外面套一个“<div class="mui-scroll-wrapper></div>”，里面套一个“<div class=" mui-scroll"=""></div>”，否则在iPhone 6下，无法滚动。安卓和模拟器没问题。