mui下拉上拉（明一）
<!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" />
<link href="../../fonts/iconfont.css" rel="stylesheet" />
<link href="../../css/lm_reset.css" rel="stylesheet" />
<link href="../../css/lm_pages.css" rel="stylesheet" />
</head>
<body class="lm_graybg">
<!--头部开始-->
<header class="mui-bar mui-bar-nav bg_fff lm_head_zb">
<h1 class="mui-title lm_head_zb_title">订单大厅</h1>
</header>
<!--头部结束-->
<!--正文-主要内容-->
<div class="mui-content lm_graybg">
<div class="lm_w94 lm_mar_top15">
<div>
<!--一个订单-->
<div class="lm_task_list_li lm_task_ListC2 bg_fff lm_mar_bot15 lm_smallyj" v-for="(order,index) in order_list" :key="order.order_id">
<!---->
<div class="lm_task_list_num lm_li_pad04 lm_flex lm_flex_justBT lm_bor_bottom lm_f12" :data-order_id="order.order_id"
@click="orderDetail">
<div class="lm_task_list_l lm_c_666">
订单号：{{order.order_sn}}
</div>
<div class="lm_task_list_r lm_c_999">
{{order.add_time}}
</div>
</div>
<!---->
<!---->
<div class="lm_task_listC lm_flex lm_flex_col_c lm_bor_bottom" :data-order_id="order.order_id" @click="orderDetail">
<!-- <div class="lm_task_date lm_c_666">
<div>12:00</div>
<div>前送达</div>
</div> -->
<div class="lm_task_con lm_bor_l" style="width:100%;">
<div class="lm_task_con_top ">
<div class="lm_task_con_top_r">
<div class="lm_task_con_li" v-for="(store,index) in order.store_list" :key="store.store_id+''+index">
<span class="lm_c_fff lm_task_con_top_l">取</span><i>{{store.store_name}}</i>
</div>
</div>
</div>
<div class="lm_task_con_top " style="margin-top: 5px;">
<div class="lm_task_con_top_r">
<div class="lm_task_con_li">
<span class="lm_c_fff lm_task_con_top_l">送</span><i class="lm_song">{{order.city}}{{order.district}}{{order.twon}}{{order.address}}</i>
</div>
</div>
</div>
</div>
<!-- <div class="lm_task_money lm_mainc lm_f15 ">
¥<span class="lm_f15">66.00</span>
</div> -->
</div>
<!---->
<!---->
<div class="lm_task_jiedan lm_mar10_top lm_mar10_bot lm_juzhong">
<button type="button" class="lm_w100 lm_c_fff lm_mainbg" :data-order_id="order.order_id" @click="I_DO">接单</button>
</div>
<!---->
</div>
<!--一个订单-->
</div>
</div>
</div>
<script src="../../js/mui.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/domain.js"></script>
<!--正文-主要内容-->
<script type="text/javascript" charset="utf-8">
mui.init({
pullRefresh: {
container: ".lm_w94", //下拉刷新容器标识，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() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据
//重置下拉加载
mui('.lm_w94').pullRefresh().refresh(true);
//初始化列表
mainContainer.page = 1;
mainContainer.getOrderList();
}
},
up: {
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: false, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
mainContainer.page++;
mainContainer.getOrderList();
}
}
}
});
//实例化vue对象
var mainContainer = new Vue({
el: ".mui-content",
created: function() {
var that = this;
mui.plusReady(function() {
that.getOrderList();
});
},
data: {
order_list: [],
page: 1
},
methods: {
//获取订单列表
getOrderList: function() {
var that = this;
mui.ajax(domain + '/Home/Rider/getOrderList', {
data: {
token: plus.storage.getItem("token"),
page:this.page
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
if (data.status == 1) {
if(that.page == 1){
that.order_list = data.data;
//结束下拉刷新
mui(".lm_w94").pullRefresh().endPulldown();
}
else{
that.order_list = that.order_list.concat(data.data);
}
//上拉加载样式
if(data.data.length < 10){
//结束上拉加载
mui(".lm_w94").pullRefresh().endPullupToRefresh(true);
}else{
//结束上拉加载
mui(".lm_w94").pullRefresh().endPullupToRefresh(false);
}
} else {
that.order_list = [];
//结束下拉刷新
mui(".lm_w94").pullRefresh().endPulldown();
//结束上拉加载
mui(".lm_w94").pullRefresh().endPullupToRefresh(true);
classifyStatus(data.status);
}
},
error: function(xhr, type, errorThrown) {
mui.toast("网络异常，请重新尝试", {
type: "div"
});
//结束下拉刷新
mui(".lm_w94").pullRefresh().endPulldown();
//结束上拉加载
mui(".lm_w94").pullRefresh().endPullupToRefresh(true);
}
});
},
//订单详情页
orderDetail(event) {
mui.openWindow({
id: 'task_detail.html',
url: './task_detail.html',
extras: {
order_id: event.currentTarget.dataset.order_id
}
});
},
//接单
I_DO(event) {
var that = this;
//尝试接单
mui.ajax(domain + '/Home/Rider/riderAccepOrder', {
data: {
token: plus.storage.getItem("token"),
order_id: event.currentTarget.dataset.order_id
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
if (data.status == 1) {
mui.toast(data.msg, {
type: "div"
});
that.getOrderList();
} else {
mui.toast(data.msg, {
type: "div"
});
that.getOrderList();
}
},
error: function(xhr, type, errorThrown) {
mui.toast("网络异常，请重新尝试", {
type: "div"
});
}
});
}
}
});
//添加刷新列表的自定义事件,切换tap页时使用
window.addEventListener("refresh_page", function() {
mainContainer.getOrderList();
});
</script>
</body>
</html>
mui下拉上拉（明一）的更多相关文章
- 修正 Mui 下拉上拉刷新功能
下拉增加动态时间计算功能: 上拉增加状态文字提示功能(当然也支持时间计算功能,只是我们暂时用不到):
- 微信小程序-ios系统-下拉上拉出现白色，如何处理呢？
这几天做小程序,有些页面都是全屏的背景,在安卓上背景是固定的,而在ios上上拉下拉出现白色,测试说体验不太好,一开始我以为是下拉上拉刷新造成的,关闭了依然是这样.为了体验好点,可以按一下解决: 方式一 ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- IOS快速集成下拉上拉刷新
http://code4app.com/ios/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90%E4%B8%8B%E6%8B%89%E4%B8%8A%E6%8B%89%E5% ...
- vue better-scroll 下拉上拉，加载刷新
_initScroll(){ this.$nextTick(() => { if (!this.scroll) { ...
- 清新大气的ListView下拉上拉刷新--第三方开源--PullDownListView
下载地址:https://github.com/guojunyi/PullDownListView 使用: xml: <com.pulldownlistview.PullDownListView ...
- mui 下拉刷新
mui 下拉刷新 此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用. <!DOCTYPE html> <html> <head> <meta chars ...
- mui的上拉加载更多 下拉刷新 自己封装的demo
----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...
- MUI实现上拉加载和下拉刷新
编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar( ...
随机推荐
- java11类和对象
import java.util.Scanner; public class jh_01_如何认识事物 { public static void main(String[] args) { Scann ...
- finalize的用法
public class GC { public static GC SAVE_HOOK = null; public static void main(Strin ...
- python环境开发
Python3 下载 Python3 最新源码,二进制文档,新闻资讯等可以在 Python 的官网查看到: Python 官网:https://www.python.org/ 你可以在以下链接中下载 ...
- js 递归总结
1.根据子id 递归查找所有父级 id 主要用于vue element 中 Cascader 级联选择器展示 在编辑中回显默认展示 tree 数据 var arr = [{ "label ...
- [CQOI2015]选数（莫比乌斯反演，杜教筛）
[CQOI2015]选数(luogu) Description 题目描述 我们知道,从区间 [L,H](L 和 H 为整数)中选取 N 个整数,总共有 (H-L+1)^N 种方案. 小 z 很好奇这样 ...
- Android项目实战（五十九）：调试方法神器Hugo
先上GitHub地址:Hugo 一句话描述该框架,以Log的形式告诉我们某个方法传入的每一个参数以及返回值,以及调用的activity 时间 等其他信息 非常适用方便代码调试 引入框架: 根目录下的b ...
- IDEA 修改编码
IDEA: 一. 文件编码修改 IntelliJ IDEA可以在菜单中的File -> Settings -> Editor -> File Encoding下修改项目文件的编码 1 ...
- Python——模块和包
一.概念 """模块():一个python文件,以 .py 结尾,包含python对象定义和语句.模块可以定义函数.类.变量,也可包含可执行文件 导入模块: 1.impo ...
- pip 自己的源 搭建
1 安装工具 pip install pip2pi 2 下载 所需要的包 pip2tgz /application/nginx/html/yum/python/ apscheduler (172 ...
- 【python数据挖掘】批量爬取站长之家的图片
概述: 站长之家的图片爬取 使用BeautifulSoup解析html 通过浏览器的形式来爬取,爬取成功后以二进制保存,保存的时候根据每一页按页存放每一页的图片 第一页:http://sc.china ...