2. 程式人生 > >mui的上拉載入下拉重新整理的實現

mui的上拉載入下拉重新整理的實現

阿新 • • 發佈：2019-01-03
效果圖

----
用的是mui框架。（我自己不會，朋友教我的。這篇可能不是很好，希望能對你有所幫助。）


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="WEIXIN/css/mui.css"/>   
<link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css"/>
<title>我的報修工單</title>
</head>
<body>
<script src="ByFrame/js/jquery.min.js?v=2.1.4"></script>
<!--    ############ 分割線  #############     -->
 <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-success-no-circle weui-icon_toast"></i> <p class="weui-toast__content">已完成</p> </div> </div> <!--end toast--> <!--BEGIN error 錯誤d--> <div id="error" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast" style="min-height:1.8em"> <p id="errorInfo">系統錯誤</p> </div> </div> <!--end toast-->
<!--    ############ 分割線  #############     -->
</body><!-- 微信裡面的方法 --><script type="text/javascript" src="WEIXIN/js/mui.js"></script><script type="text/javascript" src="WEIXIN/js/zepto.min.js"></script><script type="text/javascript" src="js/wx_workTable.js"></script><script>$(document).ready(function() { mui.init({ subpages:[{ url:'wx_myWorkTable.html', id:'wx_myWorkTable.html', styles:{ top:'0px', bottom:'0px' } }] }); });</script></html>
其實我不是很清楚，id為啥子要那麼寫。上面是頁面一，下面是頁面二。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css" />
<link rel="stylesheet" type="text/css" href="WEIXIN/css/mui.css" />


<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/flexslider.css"/>
<link rel="stylesheet" href="css/swiper.css"/>
<title>我的報修工單</title>
</head>
<body>
<script src="ByFrame/js/jquery.min.js?v=2.1.4"></script>


<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<ul style="padding: 3px 0 3px 0">
<div class="weui-actionsheet__cell" style="padding: 2px 0 2px 0">
<h4>我的工單列表</h4>
</div>
</ul>
<ul class="mui-table-view" id="wx_ul">
<!-- 動態載入資料 -->


</ul>
</ul>
</div>
</div>
<!--    ############ 分割線  #############     -->
<div id="dialogs">
<!--BEGIN error-->
       <div class="js_dialog" id="error" style="display: none;">
           <div class="weui-mask"></div>
           <div class="weui-dialog">
               <div class="weui-dialog__bd">系統錯誤</div>
               <div class="weui-dialog__ft">
                   <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
               </div>
           </div>
       </div>
<!--END error-->


<!--BEGIN loadError-->
       <div class="js_dialog" id="loadError" style="display: none;">
           <div class="weui-mask"></div>
           <div class="weui-dialog">
               <div class="weui-dialog__bd">載入資料發生錯誤</div>
               <div class="weui-dialog__ft">
                   <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
               </div>
           </div>
       </div>
<!--END loadError-->
</div>


<nav class="bottom-nav">
       <a href="wx_cusmenu.html" class="bottom-nav-item">
       <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-home"></i></i></div>
       <div class="bottom-nav-title">首頁</div>
          </a>
          <a href="wx_repairtable.html" class="bottom-nav-item">
          <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-wrench"></i></i></div>
          <div class="bottom-nav-title">我要報修</div>
          </a>
          <a href="wx_myWorkTable.html" class="bottom-nav-item on ">
          <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-tasks"></i></i></div>
          <div class="bottom-nav-title">我的工單</div>
          </a>
          <a href="wx_mydata.html" class="bottom-nav-item ">
          <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-user"></i></i></div>
          <div class="bottom-nav-title">個人中心</div>
          </a>
       </nav>
<!--    ############ 分割線  #############     -->
</body><!-- 微信裡面的方法 --><script type="text/javascript" src="WEIXIN/js/zepto.min.js"></script><script type="text/javascript" src="js/wx_workTable.js"></script><script type="text/javascript" src="js/wx_login.js"></script><script type="text/javascript" src="WEIXIN/js/mui.js"></script><script>// $(document).ready(function() {// $('#dialogs').on('click', '.weui-dialog__btn', function(){// $(this).parents('.js_dialog').fadeOut(200);// });//動態載入客戶的工單
//wxInitWorkTable();

mui.init({
swipeBack : false,//側滑返回元件
pullRefresh : {

container : '#refreshContainer', //一個功能的一部分
down : {
callback : pulldownRefresh,//callback事件回撥冒號後面就是方法
height : 60,
auto : false,
contentdown : "下拉可以重新整理",
},
up : {
height : 50,
auto : false,
contentrefresh : "正在載入...",
contentnomore : '沒有更多資料了',
callback : pulluptoRefresh
}
}
});

$("#wx_ul").on('tap', 'a', function (event) {//這很重要！！！
//console.log("ss");//mui框架下拉重新整理上拉載入，click事件無效的解決方法
this.click();//我有一篇專門寫這個小問題。
});

//下拉重新整理
function pulldownRefresh() {
setTimeout(function() { //三秒後執行函式
window.location.reload();//重新整理
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //用來停止重新整理
}, 2000);
}
//上拉載入
function pulluptoRefresh() {
setTimeout(function() { //2秒後執行函式
loadWxWorkTable();//上拉載入這是我其他js裡面寫的方法，我這裡呼叫就行了。
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);//true載入的那個會變成，沒有更多資料了
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
}, 2000);
//這裡可有可無，自己根據自己的情況。
//setTimeout(function() { //3秒後執行函式
////停止重新整理（載入）
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
//}, 4000);
}


});
</script>
</html>
被我註釋掉的程式碼，和兩個
<!--    ############ 分割線  #############     -->之間的內容，都和mui的上拉載入下拉重新整理
無關。我只是懶得弄的那麼好，反正我也不是什麼大牛。
另外mui的文件api地址http://dev.dcloud.net.cn/mui/ui/
至於為什麼要寫兩個頁面，朋友和我是這麼說的，一個頁面的話，底層的內容就會被看見。（若是沒有底層，那麼只寫頁面二就行。）




相關推薦

mui的上拉載入下拉重新整理的實現

效果圖 ---- 用的是mui框架。（我自己不會，朋友教我的。這篇可能不是很好，希望能對你有所幫助。） <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" co

WebApp-mui列表頁上拉載入下拉重新整理 跳轉詳情頁

列表頁 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=de

banner實現無限輪播+下拉重新整理上拉載入+ 下拉時 listview 和輪播圖一起重新整理

//首先把所需要的依賴包匯入  gson jar包、imageLoader jar包、banner1.4.9jar包、design jar包，，，然後匯入library，新建專案，把library匯入專案中 //新增許可權 <uses-permiss

使用vue-scroller實現上拉載入下拉重新整理

列表+優化+上拉載入下拉重新整理 因為剛進頁面就會下拉載入,所以我在created裡面就沒有加上http請求 template: <scroller class="page-loadmore-list" :on-infinite="infinite" :on-

ListView實現上拉載入&下拉重新整理

上拉載入&下拉重新整理 思路詳解： 自定義的帶有下拉重新整理和上拉載入的ListView開始時，跟系統的ListView一樣。不過多了個header和footer只不過這兩個佈局以不同的方式隱藏起來了而已。（header是在手機螢幕外的上面，footer是直接隱藏

通過SwipeRefreshLayout實現ListView的上拉載入下拉重新整理

上拉重新整理下拉載入相信是在日常的開發中使用的最頻繁的一個元件了，大量資料的展示一定會使用到分頁的功能以提升使用者體驗，目前可以看到的市面上的應用的下拉重新整理也都是配合的SwipeRefreshLayout來實現的，看起來比較美觀，相比自定義的下拉重新整理的動

mui上拉載入下拉重新整理問題

mui是h5十大框架之一。很好用，但是針對不同的場景，文件的描述不夠我們理解。 場景：通過mui的上拉載入更多資料，下拉重新整理回剛剛進入當前頁面的狀態。筆者設定每次上拉就清空舊頁面的內容，把新載入的10條資料渲染到頁面上，當下拉時候，恢復到第一次載入的狀態。 問題：當上

Android上拉載入下拉重新整理（使用第三方類庫實現的）

package com.example.android_pullxml; import java.util.ArrayList; import java.util.List; import org.json.JSONArray; import org.json.JSONEx

使用better-scroll配合vue實現上拉載入下拉重新整理元件

前提背景:大前端的時代造就了前端的業務邏輯越來越重，原有的MVP設計開發模式(jquery時代)造成了前端介面和資料操作都集中在MVP模式中的P層架構即控制器上，P層承擔了大量的邏輯程式碼和操作檢視DOM程式碼，兩者互動在一起耦合性很強並且很重，而V(檢視層)、M(資料層)的

react-native-pull實現上拉載入下拉重新整理

前言 我們在做原生app開發的時候，很多場景都會用到下拉重新整理、上拉載入的操作，Android中如PullToRefreshListView，iOS中如MJRefresh等都是比較好用，且實現上比較簡單的第三方庫。他們的實現原理大體相同，都是在列表的基礎上新增頭部和尾

簡單實現標題欄懸浮狀態，使用PullToRefreshListView上拉載入下拉重新整理

title_xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     a

自定義SwipeRefreshLayout實現上拉載入,下拉重新整理

原來的Android SDK中並沒有下拉重新整理元件，但是這個元件確實絕大多數APP必備的一個部件。好在google在v4包中出了一個SwipeRefreshLayout，但是這個元件只支援下拉重新整理，不支援上拉載入更多的操作。因此，我們就來簡單的擴充套件一下這個元件以實現上拉下載的目的。 基本原理 上

vue和mui結合使用的那些坑和vue-scroller上拉載入下拉重新整理使用

mui怎麼匯入 在main.js裡匯入js檔案 css直接在main.js裡使用impor匯入即可 測試使用在頁面使用mui，恩，完美，我以為這是一個美好的開端，但是，坑有好多啊（mui初始化，我一般放在mounted函式裡） 1. 使用mui頁面

XrecyclerView上拉載入下拉重新整理+RXjava+retrofit+fresco+MVP

依賴： //XrecyclerView：          compile 'com.jcodecraeer:xrecyclerview:1.5.9' //RXjava依賴：     implement

小程式上拉載入下拉重新整理

小程式上拉載入下拉重新整理 在小程式api裡設定 onPullDownRefresh 下拉重新整理 onReachBottom 上拉觸低 想要使用這兩個方法還要在json檔案裡配置 “onReachBottomDistance”:true, 開啟上拉 “enablePullDownR

側滑+多條目+上拉載入+下拉重新整理+無線輪播

APP package com.example.week_02_02; import android.app.Application; import com.nostra13.universalimageloader.core.DisplayImageOptions; import

XListView上拉載入下拉重新整理，第一個條目展示Banner輪播圖

佈局開始 此處只有xlistview的佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://sch

側拉+TabLayout切換fragment+Viewpager輪播圖小圓點和圖片上顯示標題+多條目+上拉載入+下拉重新整理

1.MainActivity主頁面 package com.example.zonghelianxi01; import android.annotation.SuppressLint; import android.support.annotation.Nullable; impor

側滑+多條目+上拉載入+下拉重新整理+無限輪播+網路判斷

1.MainActivity頁面 package com.example.week2_02; import android.content.DialogInterface; import android.content.Intent; import android.support.v4

基類抽取http服務(網路判斷)資料庫多條目載入上拉載入下拉重新整理

//BaseActivity public abstract class BaseActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) {