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( ...
随机推荐
- ant编译solr源码生成eclipse项目，解决一直resolve，一直[ivy:retrieve]的问题
这两天在学习solr,结果刚到编译solr源码就卡住了,足足卡了两天,网上找各种解决办法都是简单带过,说是缺少jar包,下载下来放到对应位置就好了....对应位置???咋不说这个问题用相应方法解决即可 ...
- MingGW Posix VS Win32 - 明瓜娃的毒因
MinGW-posix和win32纠缠的瓜娃子 官方首席佛偈(SourceForge)的官网下载页 法克油啊,让我一个小白情何以堪. 盘TA wiki posix wiki中文-UNIX API标准 ...
- SSL：GoDaddy SSL证书制作和安装
简介 SSL证书是数字证书的一种类似于驾驶证.护照和营业执照的电子副本.因为配置在服务器上,也称为SSL服务器证书.SSL 证书就是遵守SSL协议,由受信任的数字证书颁发机构CA,在验证服务器身份后颁 ...
- RocketChat：开源聊天软件部署
1. 简介 RocketChat是一款优秀的开源聊天软件.支持各种平台,IOS.Android.Web.Mac.Windows以及Linux,安装部署简单,功能简单易用,目前部分功能还在完善当中,特别 ...
- 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法
1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...
- python 中列表 元组 字典 集合的区别
先看图片解释 (1)列表 什么是列表呢?我觉得列表就是我们日常生活中经常见到的清单.比如,统计过去一周我们买过的东西,把这些东西列出来,就是清单.由于我们买一种东西可能不止一次,所以清单中是允许有重复 ...
- Java生成微信分享海报【基础设计】
前言 微信后台生成海报一般都是一个模板写死,然后就完事了,过了不久让修改个模板,就又要看半天,还要考虑是否重新复制一份改一改,越来越多的重复代码,全在一个图片类里,然后就越来越乱.这两天用设计模式处理 ...
- crul 命令访问公网 dns解析错误 程序报错
今天机房几台服务器都无法访问公网接口,原因是——解析公网域名出错,具体情况如下 ping 公网ip或者域名 都没有问题 curl 公网域名 出错 curl -4 访问公网域名没有问题 综合分析 ...
- WinRAR目录穿越
WinRAR目录穿越漏洞浅析及复现(CVE-2018-20250) 文章来源: https://www.t00ls.net/articles-50276.html EXP: https://githu ...
- 解决intellij idea新建maven项目，加载archetype慢的问题
File->settings 在VM Options内输入 -DarchetypeCatalog=internal 重启idea