下面的是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 > |
06 | < script src = "../js/mui.min.js" ></ script > |
07 | < script type = "text/javascript" > |
11 | url:'my-customer-list.html', |
12 | id:'my-customer-list', |
2、子页面:
02 | <div id= "pullrefresh" class= "mui-content" > |
04 | <ul class= "mui-table-view mui-table-view-chevron customer-list" > |
05 | <li class= "mui-table-view-cell" > |
09 | <script src= "../js/mui.min.js" ></script> |
10 | <script type= "text/javascript" > |
13 | container: '#pullrefresh' , |
16 | callback: pulldownRefresh |
20 | contentrefresh: '正在加载...' , |
21 | callback: pullupRefresh |
27 | function pulldownRefresh() { |
30 | mui( '#pullrefresh' ).pullRefresh().endPulldownToRefresh( false ); |
32 | function pullupRefresh() { |
35 | mui( '#pullrefresh' ).pullRefresh().endPullupToRefresh( false ); |
我爱模板网在使用这个的时候,老是陷入一个固定思维,那就是既然可以上啦下拉,肯定需要用到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下,无法滚动。安卓和模拟器没问题。