列表页
<!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>