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( ...
随机推荐
- 利用selenium模拟登陆
第一部:利用selenium登陆 导入selenium库 from selenium import webdriver 明确模拟浏览器在电脑中存放的位置,比如我存在当前目录 chromePath = ...
- 根据navigator.userAgent返回值识别 浏览器
function validBrowser(){ var u_agent = navigator.userAgent; var browser_name='Failed to identify the ...
- RabbitMQ安装与使用
官网地址: http://www.rabbitmq.com/ 安装Linux必要依赖包 下载RabbitMQ必须安装包 进行安装,修改相关配置文件即可 步骤 1.准备: yum install gcc ...
- 06-HTML
今日知识 1. HTML基本语法 2. 特殊符号表示 3.总结 HTML 1. Hyper Text Mark Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法,将各种不同空 ...
- win10双击执行python
一. 设置py环境 去官网下载Windows x86-64 executable installer安装 安装后会自动配置py的bin路径和pip的路径 Pip用于安装python库的 二. 设置wi ...
- rysnc知识梳理
rsync语法: Local: rsync [OPTION...] SRC... [DEST] #<===本地传输数据 Access via remote shell: #<===借助通道 ...
- win10配置CUDA+Tensorflow2.0的一些经验
目录 问题描述 安装 tensorflow-cpu-2.0 编译 Nvidia Samples 问题描述 网上已经很多关于配置CUDA的文章,自己这篇文章只是个大致的安装步骤,文章重点是安装和配置的一 ...
- git报错：fatal: No configured push destination.
本地仓库代码(git push)上传git仓库报错: fatal: No configured push destination. Either specify the URL from the co ...
- ArcGIS Server、SDE许可更新
环境:windows server2008,ArcGIS10.1系列. 一.更新arcgis server许可 选择许可文件进行导入即可.注意最好从开始程序中找到并打开软件授权窗口.直接双击运行ecp ...
- .NET CLI简单使用
官方文档https://docs.microsoft.com/zh-cn/dotnet/core/tools/?tabs=netcore2x 创建新项目 查看能创建什么类型的项目 dotnet new ...