mui下拉上拉（明一）

最新推荐文章于 2024-08-19 17:31:53 发布
最新推荐文章于 2024-08-19 17:31:53 发布
阅读量101 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/lsongyang/p/10892080.html
版权 
<!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">
                        <!--01-->
                        <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>
                        <!--01-->
                        <!--02-->
                        <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 ">
                                &yen;<span class="lm_f15">66.00</span>
                            </div> -->
                        </div>
                        <!--02-->
                        <!--03-->
                        <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>
                        <!--03-->
                    </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>

 

转载于:https://www.cnblogs.com/lsongyang/p/10892080.html

ayiewu460246
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MUI整合上拉下拉的写法
08-28
"MUI整合上拉下拉的写法" MUI中的上拉下拉整合写法是指在制作APP时，下拉刷新和上拉加载同时使用的写法。这种写法可以让APP具备了上拉加载和下拉刷新的功能，提高用户体验。 在MUI中，实现上拉下拉整合的写法需要...
MUI实现上拉加载和下拉刷新效果
08-30
通过以上步骤，我们可以结合MUI框架与后端API实现上拉加载和下拉刷新功能，提高移动端应用的数据加载效率和用户体验。需要注意的是，实际项目中还需要考虑数据的异步加载、网络状态判断、错误处理等方面，确保功能的...
MUI 上拉刷新/下拉加载功能实例代码
08-30
在MUI中，上拉刷新和下拉加载是两种常见的列表滚动交互功能，它们对于提供流畅的用户体验至关重要。这两个功能使得用户在浏览列表时可以方便地获取更多内容或更新现有内容。 **上拉刷新（Pull-to-Refresh）** 是指...
MUI选项卡下拉刷新上拉加载demo
12-10
**MUI选项卡下拉刷新上拉加载Demo详解** 在移动应用开发中，为了提供流畅且高效的用户体验，上拉刷新和下拉加载已经成为必不可少的功能。MUI（Mobile UI）是DCloud公司推出的一款轻量级的前端框架，专门用于构建高...
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
08-29
使用MUI框架模拟手机端的下拉刷新和上拉加载功能 MUI框架作为一款基于HTML5plus的移动应用框架，提供了强大且灵活的解决方案，帮助开发者快速构建高品质的移动应用。其中，MUI框架的Ajax函数封装了常用的GET、POST...
Python爬虫案例二：获取虎牙主播图片(动态网站)
m0_74614835的博客
08-19 204
params不能写在__init__()里面，因为__init__()只执行一次，params是变化的。'iPageNo': '{}'.format(i), # i是字符串。print('ok 第{}张--{}'.format(self.no, name))1.异步数据（即先返回HTML，再返回目标的数据，只是触发了JSON请求），不在HTML中。os.mkdir('../虎牙')测试链接：https://live.huya.com/# 构造7页的params。2.不能刷新网页，直接翻页。
安企CMS多站点迁移教程
no_reg的博客
08-15 383
【代码】安企CMS多站点迁移教程。
JWT（JSON Web Token）工作原理及特点
modelsetget的博客
08-18 304
总结了JWT的基本概念、结构、工作流程、优势以及一些深入思考问题，希望对您理解JWT有所帮助。
Harbor仓库push显示
最新发布
qq_70531838的博客
08-19 157
背景： 在做测试时发现harbor仓库端口开放这，却一直登录不上去，重启harbor资源包docker-compose还是不行，修改了docker.service文件不行，json文件也不行，以下是涉及到的命令和报错（好像是这个，查的日志）harbor默认在80端口，将现有的环境down，再将harbor.cfg的80端口修改至81端口（我是这样解决的）#涉及到push操作注意添加以下内容。
解锁高效商品搜索：优化API返回值解析的艺术
2401_85789772的博客
08-19 198
优化API返回值的解析效率，是提升商品搜索性能和用户体验的重要途径。通过选择高效的解析库、采用流式解析、智能裁剪数据、应用缓存机制以及实现异步并行处理，电商平台可以显著提升其商品搜索的响应速度和处理能力，为用户提供更加流畅、高效的购物体验。在数据驱动的商业时代，这样的优化策略无疑将为电商平台赢得更多竞争优势。
hive sql 处理多层 json 数组
第一片心意的博客
08-15 861
通过 hive sql，展开包含多层 json 数组的字符串，然后获取到每个子 json 中的值。
Protobuf和JSON之间的选择指南
极道Jdon的技术博客
08-17 578
最后，需要注意的是，使用 Protobuf 时，需要特殊的架构感知客户端和其他工具，而对于 JSON，则不需要特殊的客户端，因为 JSON 是纯文本格式。但是，如果我们的项目需要对 JSON 数据进行严格验证，我们可以使用JSON Schema，这是一个用于定义和验证 JSON 数据结构的强大工具。虽然它提供了显着的好处，但它的使用是可选的。在本文中，我们探讨 JSON 和 Protocol Buffers 数据格式之间的主要区别，以便在为我们的应用程序制定数据编码策略时做出明智的决策。
.NET 读取config配置文件 appsettings.json [Configuration]值
代码笔记
08-19 103
【代码】读取config配置文件 appsettings.json [Configuration]
C++ 设计模式——模板方法模式
qq_68194402的博客
08-15 663
模板方法模式是一种行为设计模式，它定义了一个算法的骨架，而将一些步骤延迟到子类中。通过这种方式，模板方法允许子类在不改变算法结构的情况下重新定义算法的某些特定步骤。
【iOS】—— JSONModel
qq_72437394的博客
08-16 640
JSONModel是一个在iOS应用程序中使用的开源库，主要功能是JSON数据映射到Objective-C对象上。使用JSONModel可以方便地处理服务器返回的JSON格式的数据，将其转化为Objective-C对象，使得数据访问变的更加简单。JSONModel提供了一种间接的方式来定义数据模型，开发者只需要创建一个继承自JSONModel的类，并在其中定义属性，将可以将JSON数据映射到对象上。JSONModel之间的嵌套关系可以通过嵌套JSONModel子类来实现。
FastJson JSON源码学习
家住海边，见过大风大浪
08-16 463
andor是Type的子接口，表示一个有参数的类型，例如Map<K,V>等。但实现上并不直接表示和Map<K,V>等，而是表示和等这种具体的类型。是不是看着眼熟，其实这就是我们常说的泛型。而代表的是一个泛型的实例，我们就称为“泛型实例”吧。当创建泛型P）时，将解析P），并且递归地创建PString实现这个接口的“类”必须实现一个equals()String）也相同的两个“类”等同起来。
鸿蒙应用程序框架基础
gitzzp的博客
08-17 1063
pack.info文件猫叔了App Pack中每个HAP和HSP的属性，包含App中的bundleName和versionCode信息，以及Module中的name、type和abilites等信息。每个应用中至少包含一个.hap文件，可能包含若干个.hsp文件，也可能不包含。一个应用中的所有.hap文件和.hsp文件合并在一起称为一个Bundle，其对应的bundleName是应用的唯一标识。当应用发布上架到应用市场时，需要将Bundle打包为一个.app文件用于上架，这个.app文件称为。
总结常见报错信息
m0_68903702的博客
08-16 323
在@Controller注解中，返回的是字符串或者是字符串匹配的模板名称，即直接渲染视图，与html页面配合使用的，java后端的代码要结合html的情况进行渲染,使用model对象（或者modelandview）的数据将填充user视图中的相关属性，然后展示到浏览器；而在@RestController中，返回的应该是一个对象，即return一个user对象，这时，在没有页面的情况下，也能看到返回的是一个user对象对应的json字符串。情形一：若前端传入Json格式，后端使用。
SpringBoot注解大总结
qq_65095414的博客
08-18 565
接受get请求执行注解下的方法（get/delete 请求参数一般拼接到url后面）也可以使用请求体但要规范不能使用请求体1.从http中读请求体中的数据 ,底层是HttpServletRequest 获取2.自动把JSON字符串映射成java中的对象@Post/pubpost/pub 请求参数一般放在请求体里面，且以JSON格式进行传输（post插入请求使用）Target->类上/方法上类上->提取controller中的一个重复的路径。
mui下拉菜单代码示例
04-04
以下是一个简单的mui下拉菜单代码示例： HTML: ``` <header class="mui-bar mui-bar-nav"> <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">下拉菜单</h1> </header> <div class="mui-content"> <div class="mui-content-padded"> <p>点击左上角菜单按钮展示下拉菜单</p> </div> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="#">菜单项1</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项2</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项3</a> </li> </ul> </div> ``` CSS: ``` .mui-bar-nav a.mui-action-menu { font-size: 24px; } ``` JavaScript: ``` mui.init({ swipeBack: false }); var menuWrapper = document.getElementById('menu-wrapper'); var menu = document.getElementById('menu'); var menuWrapperClassList = menuWrapper.classList; var backdrop = document.getElementById('menu-backdrop'); document.getElementById('show-menu').addEventListener('tap', function() { menuWrapperClassList.add('mui-active'); backdrop.addEventListener('tap', closeMenu); menu.addEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.show(); }); var closeMenu = function() { menuWrapperClassList.remove('mui-active'); backdrop.removeEventListener('tap', closeMenu); menu.removeEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.hide(); } var menuTransitionEnd = function(e) { if (e.target === menu) { backdrop.removeEventListener('tap', closeMenu); backdrop.addEventListener('tap', closeMenu); } } ``` 注：以上代码需要引入mui.css和mui.js文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值