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( ...
随机推荐
- Codeforces_456_A
http://codeforces.com/problemset/problem/456/A 按价格排序,比较质量. #include<cstdio> #include<algori ...
- BZOJ1257 [CQOI2007]余数之和 (数论分块)
题意: 给定n, k,求$\displaystyle \sum_{i=1}^nk\;mod\;i$ n,k<=1e9 思路: 先转化为$\displaystyle \sum_{i=1}^n(k- ...
- 11--Java--JDBC知识梳理
JDBC 一.概述:JDBC(java database connection),使用java语言连接数据库,是java提供一套操作数据库的接口(标准),实现对数据库的统一访问,是一个java引用应用 ...
- 论文《learning to link with wikipedia》
learning to link with wikipedia 一.本文目标: 如何自动识别非结构化文本中提到的主题,并将其链接到适当的Wikipedia文章中进行解释. 二.主要借鉴论文: Miha ...
- 以stm32f407为例，学习cortex-m4通用寄存器的用法
测试代码如下: int add(int a, int b, int c, int d, int e, int f) { return a+b+c+d+e+f; } int main(void) { i ...
- Django请求过程
- 服务器安全之iptables
服务器安全之iptables iptables防火墙简介 Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的安全自由的基于包过滤的防火墙 ...
- java实现交集，并集，包括对象和基本类型
//java实现求交集,并集,包括元素为对象和基本类型,主要是利用hashMap,set不允许元素重复等特性来进行实现去重,利用反射机制来灵活配置以对象某个属性来进行去重./** * Gaoxl * ...
- win10配置CUDA+Tensorflow2.0的一些经验
目录 问题描述 安装 tensorflow-cpu-2.0 编译 Nvidia Samples 问题描述 网上已经很多关于配置CUDA的文章,自己这篇文章只是个大致的安装步骤,文章重点是安装和配置的一 ...
- U盘制作macOS Sierra的启动盘
1.macOS Sierra的几种安装方式 *开机时按住command+option+r 进行联网在线安装.PS:在网速好的情况还行,但是如果网络差的时候,它会让你崩溃的. *使用光盘进行安装. *今 ...