WebApp-mui列表頁上拉載入下拉重新整理 跳轉詳情頁
阿新 • • 發佈：2018-11-07
列表頁
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css"列表頁程式碼rel="stylesheet" /> <style type="text/css"> [v-cloak] { visibility: hidden; } #main-list>ul { margin: 0px; padding: 0px; list-style: none; } #main-list .item {height: 140px; } #main-list .item img { width: 60px; height: 60px; } </style> </head> <body> <div class="mui-content"> <div id="main-list" v-cloak> <ul> <li class="item" v-for="item,index in list" :key="item.goods_id" @click="showDetails(list[index])"> <div><img :src="item.head" ></div> <div>貨源ID：{{item.goods_id}}</div> <div>貨主姓名：{{item.goods_user_name}}</div> <div>貨物型別：{{item.goods_type}}</div> </li> </ul> </div> </div> <script src="js/mui.min.js"></script> <script src="js/vue.min.js"></script> <script src="js/skzj.js"></script> <script type="text/javascript"> //公共變數初始化 - 開始 var pub_list_data = [];//儲存主列表資料 var pub_preload_list_data = [];//儲存預載入的列表資料 var pub_start_num = 0;//分頁查詢起始位置 var pub_limit_num = 50;//分頁查詢偏移量 var pub_is_end = false;//是否到達列表底部 var pub_last_preload_time = new Date().valueOf();//儲存上次預載入的時間 //公共變數初始化 - 結束 //Vue初始化 - 開始 var pub_main_list = new Vue({ el: "#main-list", data: { list: [] }, methods: { showDetails: function(item_info) { mui.openWindow({ url: "html/details.html", id: "html/details.html", extras: { info: item_info } }); } } }); //Vue初始化 - 結束 //公共方法 - 開始 //從伺服器端載入列表資料 function loadListDate(type,params,start,callback) { //設定傳參的預設值 if (!(type === "down" || type === "preload")) { console.log("type引數錯誤"); return false; } params = params || {}; start = start || 0; if(typeof(callback) !== "function") { callback = function() {}; } mui.ajax(skzj.host + "/api/1.0/market/goods/list",{ data:{ userphone: localStorage.getItem("userphone"), token: localStorage.getItem("token"), origin_province: params.origin_province || "", origin_city: params.origin_city || "", origin_district: params.origin_district || "", destination_province: params.destination_province || "", destination_city: params.destination_city || "", destination_district: params.destination_district || "", start: start, end: start + pub_limit_num }, dataType:'json',//伺服器返回json格式資料 type:'post',//HTTP請求型別 timeout:5000,//超時時間設定為5秒； headers:{'Content-Type':'application/json'}, success:function(data){ if (data.success === true) { if(Array.isArray(data.list) === false) { data.list = [];//如果列表資料格式不是陣列,就設為空陣列 } if (type === "down") { //如果是下拉重新整理 pub_list_data = data.list; pub_start_num = data.list.length; if(data.list.length = pub_limit_num) { //如果還有資料,則進行預載入 loadListDate("preload",{},pub_start_num); } } else if (type === "preload") { pub_preload_list_data = data.list;//將從伺服器端獲取的資料存入預載入變數中 pub_start_num += data.list.length; //預下載圖片 for (let item of pub_preload_list_data) { let item_image = new Image(); item_image.src = item.head; } } else { return false; } pub_main_list.list = pub_list_data;//通過Vue渲染列表 } else if (data.success === false){ } else { } pub_is_end = (data.list.length === 0) || (data.list.length < pub_limit_num);//設定是否到達頁面底部 callback();//執行回撥 }, error:function(xhr,type,errorThrown){ //如果Ajax過程出現報錯 callback()//執行回撥 } }); } //渲染預載入資料 function renderPreloadData() { pub_list_data = pub_list_data.concat(pub_preload_list_data);//將列表內原有資料與預載入資料合併 pub_main_list.list = pub_list_data;//渲染列表 mui('#main-list').pullRefresh().endPullupToRefresh(pub_is_end);//結束上拉載入動畫 loadListDate("preload",{},pub_start_num);//進行下一次預載入 } //公共方法 - 結束 //監聽事件 - 開始 //螢幕觸控事件 document.getElementById("main-list").addEventListener("touchmove",function(){ var apart_bottom = document.getElementById("main-list").offsetHeight - window.pageYOffset;//距離頁面底部的距離 //如果距離頁面底部小於3000,且距離上次預載入超過2秒 if((apart_bottom < 3000) && ((new Date().valueOf() - pub_last_preload_time) > 2000)) { renderPreloadData();//渲染預載入資料 pub_last_preload_time = new Date().valueOf();//把當前時間賦值給“上次預載入時間” } }); //網路連線恢復 window.onLineHandler = function() { skzj.nativeToast("網路連線已恢復"); mui('#main-list').pullRefresh().enablePullupToRefresh();//啟用上拉載入 }; //網路斷開 window.offLineHandler = function() { skzj.nativeToast("網路連線斷開了"); pub_end_of_list = true;//設定是否到達列表底部為true mui('#main-list').pullRefresh().endPulldown();//結束下拉重新整理動畫,以防斷網時正在下拉重新整理 mui('#main-list').pullRefresh().endPullupToRefresh();//結束上拉載入動畫,以防斷網時正在上拉載入 mui('#main-list').pullRefresh().disablePullupToRefresh();//禁用上拉載入 }; //監聽事件 - 結束 //每個頁面必須呼叫一次mui.init()，可以引數為空 mui.init({ pullRefresh: { container: "#main-list", //下拉重新整理容器標識，querySelector能定位的css選擇器均可，比如：id、.class等 down: { style: 'circle', //必選，下拉重新整理樣式，目前支援原生5+ ‘circle’ 樣式 color: '#2BD009', //可選，預設“#2BD009” 下拉重新整理控制元件顏色 height: '50px', //可選,預設50px.下拉重新整理控制元件的高度, range: '100px', //可選 預設100px,控制元件可下拉拖拽的範圍 offset: '0px', //可選 預設0px,下拉重新整理控制元件的起始位置 auto: false, //可選,預設false.首次載入自動上拉重新整理一次 callback: function() { mui('#main-list').pullRefresh().endPulldown();//結束下拉重新整理動畫 mui('#main-list').pullRefresh().refresh(true);//重置上拉載入狀態 loadListDate("down",{},0);//從伺服器端載入列表資料 } //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料； }, up: { height: 50, //可選.預設50.觸發上拉載入拖動距離 auto: false, //可選,預設false.自動上拉載入一次 contentrefresh: "正在載入...", //可選，正在載入狀態時，上拉載入控制元件上顯示的標題內容 contentnomore: '沒有更多資料了', //可選，請求完畢若沒有更多資料時顯示的提醒內容； callback: function() { renderPreloadData();//渲染預載入資料 } //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料； } } }) mui.ready(function(){ //從伺服器端載入列表資料 loadListDate("down",{},0);//頁面載入之後的第一次載入 }) mui.plusReady(function(){ //隱藏滾動條 plus.webview.currentWebview().setStyle({scrollIndicator:'none'}); //監聽自定義事件 window.addEventListener('refresh', function(event){ mui('#mui-list').pullRefresh().refresh(true);//重置上拉載入狀態 loadListDate("down",{},0);//從伺服器端載入列表資料 }) }) </script> </body> </html>
詳情頁程式碼
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="../css/mui.min.css" rel="stylesheet" /> <title>Document</title> <style type="text/css"> [v-cloak] { visibility: hidden; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">標題</h1> </header> <div id="main-content" class="mui-content" v-cloak> <div>貨源ID：{{info.goods_id}}</div> <div>貨主姓名：{{info.goods_user_name}}</div> <div>貨物型別：{{info.goods_type}}</div> <div>發貨數量：{{info.user_send_out_num}}</div> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.min.js"></script> <script src="../js/skzj.js"></script> <script type="text/javascript"> //Vue初始化 - 開始 var pub_main_content = new Vue({ el: "#main-content", data: { info: {} }, methods: { } }); //Vue初始化 - 結束 //公共方法 - 開始 function loadInfo(id) { mui.ajax(skzj.host + "/api/1.0/market/goods/" + id + "/details",{ data:{ userphone: localStorage.getItem("userphone"), token: localStorage.getItem("token") }, dataType:'json',//伺服器返回json格式資料 type:'post',//HTTP請求型別 timeout:5000,//超時時間設定為5秒； headers:{'Content-Type':'application/json'}, success:function(data){ if (data.success === true) { pub_main_content.info = Object.assign(data,pub_main_content.info); } else if(data.success === false) { } else{ } }, error:function(xhr,type,errorThrown){ //如果Ajax過程出現報錯 } }); } //公共方法 - 結束 //每個頁面必須呼叫一次mui.init()，可以引數為空 mui.init(); mui.ready(function(){ }) mui.plusReady(function(){ var info = plus.webview.currentWebview().info; pub_main_content.info = info; loadInfo(info.goods_id); }) </script> </body> </html>詳情頁