mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面
使用mui双webview,实现下拉刷新上拉加载
主页面：
order_index.html
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>直播生活商家端-订单大厅</title>
<script src="../../js/flexible.js"></script>
<script src="../../js/mui.min.js"></script>
<link rel="stylesheet" href="../../fonts/iconfont.css" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/init.css" />
<link rel="stylesheet" type="text/css" href="../../css/gz_css.css" /> </head> <body style="background-color: #f7f7f7">
<header class="mui-bar mui-bar-nav gz_bar">
<h1 class="mui-title">订单大厅</h1>
</header> <div class="mui-content gz_order_index"> </div>
<div class="gz_button_box_show"></div> <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/Vue.js"></script>
<script src="../../js/common.js"></script>
<script type="text/javascript">
//启用双击监听
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'./order_index_sub.html',
id:'order_index_sub.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
}); var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
</script> </body> </html>
order_index_sub.html
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>直播生活商家端-订单大厅</title>
<link rel="stylesheet" href="../../fonts/iconfont.css" />
<link rel="stylesheet" href="../../css/mui.min.css" />
<link rel="stylesheet" href="../../css/init.css" />
<link rel="stylesheet" type="text/css" href="../../css/gz_css.css" /> </head>
<style>
.btn-block {
margin: 0 auto;
width: 4rem;
height: 1.5rem;
text-align: center;
position: relative;
z-index: 99;
} .gz_jiedan {
display: inline-block;
} .no-content {
width: 2rem;
height: 2rem;
} .no-con-box {
text-align: center;
padding-top: 50%;
} .no-con-box p {
padding-top: 0.5rem;
} .mui-content {
background-color: #f7f7f7 !important;
}
</style> <body style="background-color: #f7f7f7">
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll gz_order_index" id="order_index">
<!--数据列表-->
<div class="gz_box">
<div v-show="!ishave">
<div class="no-con-box">
<img src="../../img/no_content.png" class="no-content" />
<p>暂无内容</p>
</div>
</div>
<div v-show="ishave">
<ul class="mui-table-view gz_order_ul">
<li class="mui-table-view-cell mui-media gz_order_li gz_xiangqing" v-for="(val,index) in order" :key="val.order_id">
<a href="javascript:;" class="gz_order_li_a">
<div class="gz_order_top">
<span class="gz_order_top_left">订单号：<em>{{val.order_sn}}</em></span>
<span class="gz_order_top_right">{{val.add_time}}</span>
</div>
<div class="gz_order_index_li_body">
<div class="gz_order_body_1" :data-id="val.order_id">
<h1><em>{{val.order_id}} {{val.consignee}}</em>{{val.mobile}}</h1>
</div>
<div class="gz_order_body_2" :data-id="val.order_id">
<ul>
<li v-for="val2 in val.goods_list">
<h3>{{val2.goods_name}}</h3>
<h4>x{{val2.goods_num}}</h4>
<h5>￥{{val2.goods_price}}</h5>
</li>
</ul>
</div>
<div class="gz_order_body_3">
<div class="btn-block" :data-order_id="val.order_id">
<button type="button" class="mui-btn mui-btn-block mui-btn-primary gz_jiedan">接单</button>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="gz_button_box_show"></div>
<script src="../../js/flexible.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/Vue.js"></script>
<script src="../../js/common.js"></script>
<script>
//下拉刷新
mui.init({
pullRefresh: {
container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
swipeBack: false,
keyEventBind: {
backbutton: false //关闭back按键监听
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
},
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； }
}
}); //上拉加载
function pullupRefresh() {
mui.ajax(site_url + '/Home/Business/getOrderList', {
data: {
token: plus.storage.getItem('token'),
type: order_index_vue.type,
page: order_index_vue.pageNumber
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒,超时报错；
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
if(data.data.length < order_index_vue.pageSize) {
order_index_vue.order.push.apply(order_index_vue.order, data.data);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
} else {
order_index_vue.order.push.apply(order_index_vue.order, data.data);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
}
order_index_vue.pageNumber++;
},
error: function(xhr, type, errorThrown) {
//异常处理；
mui.toast(type);
}
}); } /**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
//页码重置为1
order_index_vue.pageNumber = 1;
//重置上拉加载功能为可用
mui('#pullrefresh').pullRefresh().refresh(true); mui.plusReady(function() {
if(plus.storage.getItem('token')) {
mui.ajax(site_url + '/Home/Business/getOrderList', {
data: {
token: plus.storage.getItem('token'),
type: order_index_vue.type,
page: order_index_vue.pageNumber
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒,超时报错；
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function(data) {
//重置上拉加载。refresh（）需要放在endPulldownToRefresh（）下面，解决苹果问题
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false); //下拉刷新判断数据<一页10条的时候，页码重置为一
if(data.data.length < order_index_vue.pageSize) {
order_index_vue.order = data.data;
order_index_vue.pageNumber = 2;
order_index_vue.ishave = true;
if(data.data == null || data.data.length == 0) {
order_index_vue.ishave = false;
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //阻止上拉加载
}
} else {
order_index_vue.order = data.data;
order_index_vue.pageNumber = 2;
order_index_vue.ishave = true;
}
}, error: function(xhr, type, errorThrown) {
//异常处理；
mui.toast(type); }
});
} else {
mui.toast('没有登录', {
duration: 'long',
type: 'div'
})
}
});
}
</script>
<script type="text/javascript" charset="utf-8">
mui.init({});
var order_index_vue = new Vue({
el: '#order_index',
data: {
order: [], //order
pageNumber: 1,
ishave: true,
pageSize: 10,
type: 0
},
methods: {
get_over_info: function(oid) {
var that = this;
mui.ajax(site_url + '/Home/Business/businessAcceptOrder', {
data: {
token: plus.storage.getItem('token'),
order_id: oid
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒,超时报错；
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function(data) { mui.toast(data.msg, {
duration: '200',
type: 'div'
})
if(data.status == 1) {
mui.toast(data.msg, {
duration: '200',
type: 'div'
}) } else {
mui.toast(data.msg, {
duration: '200',
type: 'div'
})
} },
error: function(xhr, type, errorThrown) {
mui.toast('网络错误');
}
});
} }
}) //跳详情
$("body").on("tap", ".gz_order_body_1", function(e) {
e.stopPropagation();
var id = this.getAttribute("data-id"); //获取产品的data-id
mui.openWindow({
url: "../order/order_details.html",
id: "order_details",
extras: {
order_index_id: id
}
})
})
$("body").on("tap", ".gz_order_body_2", function(e) {
e.stopPropagation();
var id = this.getAttribute("data-id"); //获取产品的data-id
mui.openWindow({
url: "../order/order_details.html",
id: "order_details",
extras: {
order_index_id: id
}
})
}) //执行ajax进我的订单
mui('body').on('tap', '.btn-block', function(e) {
var order_id = mui(this)[0].dataset.order_id; //获取 ：data的值
e.stopPropagation(); //阻止冒泡
order_index_vue.get_over_info(order_id);
var botton = plus.webview.getLaunchWebview();
var order_sub = plus.webview.getWebviewById('order_over_sub.html'); mui.fire(botton, "jiedan", ''); //自定义事件
mui.fire(order_sub, "jiedansub", ''); //自定义事件
}) //登录时订单大厅重新刷新
window.addEventListener('refresh_index', function(e) {
pulldownRefresh();
})
</script> </body> </html>
mui下拉刷新上拉加载的更多相关文章
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- ListView下拉刷新上拉加载更多实现
这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...
随机推荐
- JFrame的getContentPane
我们可以在 JFrame 对象中添加 AWT 或者 Swing 组件.但是,虽然它有 add 方法,却不能直接用于添加组件,否则会抛出异常.造成这个现象的原因只有一个解释:JFrame 不是一个容器, ...
- Go语言实现：【剑指offer】二叉树的下一个结点
该题目来源于牛客网<剑指offer>专题. 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回. 注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. Go语 ...
- DOCKER 学习笔记9 Kubernetes (K8s) 弹性伸缩容器 下
前言 从上一篇看来,我们已经对于Kubernetes ,通过minikube 建立集群,而后使用kubectl 进行交互,对Deployment 部署以及服务的暴露等.这节,将学习弹性的将服务部署到多 ...
- window10 vs2013 SIFTGPU
碰到的问题: 1.一大推语法错误: 所有For_EACH_OCTAVE的地方都出现了语法错误.后来查找了一下For_EACH_OCTAVE是个啥,发现是一个宏定义,也不知道宏定义定义的好好的,为啥会编 ...
- Mac-Mysql忘记root密码
cd /usr/local/mysql/bin 切换到root权限 ,需要输入密码: sudo su 输入之后会看见如下信息: sh-3.2# 使用如下命令以安全模式运行mysql ./mysqld_ ...
- 适合产品经理的十本书 From 俞军
(转自俞军,如有侵权,请评论区留言,我会尽快删除:) 适合产品经理的十本书 俞军 入门三本书:社会心理学 阿伦森 插图第七版:特别好,适合成为“产品经理的第一本书”第一本经济学:经济学帮助人们洞察世事 ...
- 基于MR实现ngram语言模型
在大数据的今天,世界上任何一台单机都无法处理大数据,无论cpu的计算能力或者内存的容量.必须采用分布式来实现多台单机的资源整合,来进行任务的处理,包括离线的批处理和在线的实时处理. 鉴于上次开会讲了语 ...
- 戏说前端之CSS编码规范
前言 项目启动时 css 应该注意哪些问题 文件名规范 文件名建议用小写字母加中横线的方式.为什么呢?因为这样可读性比较强,看起来比较清爽,像链接也是用这样的方式,例如 // 地址: github的地 ...
- ES6 - 基础学习(1): 开发环境搭建
现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...
- 配置 Apache James 邮件服务器以使用加密邮件通讯协议
可先参照: 使用 Apache James 3.3.0(开源免费) 搭建内网电子邮件服务器(基于 Windows + Amazon Corretto 8)https://www.cnblogs.com ...