WebApp-mui列表页上拉加载下拉刷新 跳转详情页

时间:2022-11-09 16:34:54

列表页

WebApp-mui列表页上拉加载下拉刷新 跳转详情页WebApp-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" />
        <style type="text/css">
            [v-cloak] {
                visibility: hidden;
            }
            #main-list>ul {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            #main-list .item {
                height: 140px;
            }
            #main-list .item img {
                width: 60px;
                height: 60px;
            }
        </style>
    </head>
    <body>
        <div class="mui-content">
            <div id="main-list" v-cloak>
                <ul>
                    <li class="item" v-for="item,index in list" :key="item.goods_id" @click="showDetails(list[index])">
                        <div><img :src="item.head" ></div>
                        <div>货源ID:{{item.goods_id}}</div>
                        <div>货主姓名:{{item.goods_user_name}}</div>
                        <div>货物类型:{{item.goods_type}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script src="js/vue.min.js"></script>
        <script src="js/skzj.js"></script>
        <script type="text/javascript">
            //公共变量初始化 - 开始
            var pub_list_data = [];//存储主列表数据
            var pub_preload_list_data = [];//存储预加载的列表数据
            var pub_start_num = 0;//分页查询起始位置
            var pub_limit_num = 50;//分页查询偏移量
            var pub_is_end = false;//是否到达列表底部
            var pub_last_preload_time = new Date().valueOf();//存储上次预加载的时间
            //公共变量初始化 - 结束

            //Vue初始化 - 开始
            var pub_main_list = new Vue({
                el: "#main-list",
                data: {
                    list: []
                },
                methods: {
                    showDetails: function(item_info) {
                        mui.openWindow({
                            url: "html/details.html",
                            id: "html/details.html",
                            extras: {
                                info: item_info
                            }
                        });
                    }
                }
            });
            //Vue初始化 - 结束

            //公共方法 - 开始
            //从服务器端加载列表数据
            function loadListDate(type,params,start,callback) {
                //设置传参的默认值
                if (!(type === "down" || type === "preload")) {
                    console.log("type参数错误");
                    return false;
                }
                params = params || {};
                start = start || 0;
                if(typeof(callback) !== "function") {
                    callback = function() {};
                }
                mui.ajax(skzj.host + "/api/1.0/market/goods/list",{
                    data:{
                        userphone: localStorage.getItem("userphone"),
                        token: localStorage.getItem("token"),
                        origin_province: params.origin_province || "",
                        origin_city: params.origin_city || "",
                        origin_district: params.origin_district || "",
                        destination_province: params.destination_province || "",
                        destination_city: params.destination_city || "",
                        destination_district: params.destination_district || "",
                        start: start,
                        end: start + pub_limit_num
                    },
                    dataType:'json',//服务器返回json格式数据
                    type:'post',//HTTP请求类型
                    timeout:5000,//超时时间设置为5秒;
                    headers:{'Content-Type':'application/json'},                  
                    success:function(data){
                        if (data.success === true) {
                            if(Array.isArray(data.list) === false) {
                                data.list = [];//如果列表数据格式不是数组,就设为空数组
                            }
                            if (type === "down") {
                                //如果是下拉刷新
                                pub_list_data = data.list;
                                pub_start_num = data.list.length;
                                if(data.list.length = pub_limit_num) {
                                    //如果还有数据,则进行预加载
                                    loadListDate("preload",{},pub_start_num);
                                }
                            } else if (type === "preload") {
                                pub_preload_list_data = data.list;//将从服务器端获取的数据存入预加载变量中
                                pub_start_num += data.list.length;
                                //预下载图片
                                for (let item of pub_preload_list_data) {
                                    let item_image = new Image();
                                    item_image.src = item.head;
                                }
                            } else {
                                return false;
                            }
                            pub_main_list.list = pub_list_data;//通过Vue渲染列表
                        } else if (data.success === false){
                            
                        } else {
                            
                        }
                        pub_is_end = (data.list.length === 0) || (data.list.length < pub_limit_num);//设定是否到达页面底部
                        callback();//执行回调
                    },
                    error:function(xhr,type,errorThrown){
                        //如果Ajax过程出现报错
                        callback()//执行回调
                    }
                });
            }
            //渲染预加载数据
            function renderPreloadData() {
                pub_list_data = pub_list_data.concat(pub_preload_list_data);//将列表内原有数据与预加载数据合并
                pub_main_list.list = pub_list_data;//渲染列表
                mui('#main-list').pullRefresh().endPullupToRefresh(pub_is_end);//结束上拉加载动画
                loadListDate("preload",{},pub_start_num);//进行下一次预加载
            }
            //公共方法 - 结束

            //监听事件 - 开始
            //屏幕触摸事件
            document.getElementById("main-list").addEventListener("touchmove",function(){
                var apart_bottom = document.getElementById("main-list").offsetHeight - window.pageYOffset;//距离页面底部的距离
                //如果距离页面底部小于3000,且距离上次预加载超过2秒
                if((apart_bottom < 3000) && ((new Date().valueOf() - pub_last_preload_time) > 2000)) {
                    renderPreloadData();//渲染预加载数据
                    pub_last_preload_time = new Date().valueOf();//把当前时间赋值给“上次预加载时间”
                }
            });
            //网络连接恢复
            window.onLineHandler = function() {
                skzj.nativeToast("网络连接已恢复");
                mui('#main-list').pullRefresh().enablePullupToRefresh();//启用上拉加载
            };
            //网络断开
            window.offLineHandler = function() {
                skzj.nativeToast("网络连接断开了");
                pub_end_of_list = true;//设定是否到达列表底部为true
                mui('#main-list').pullRefresh().endPulldown();//结束下拉刷新动画,以防断网时正在下拉刷新
                mui('#main-list').pullRefresh().endPullupToRefresh();//结束上拉加载动画,以防断网时正在上拉加载
                mui('#main-list').pullRefresh().disablePullupToRefresh();//禁用上拉加载
            };
            //监听事件 - 结束

            //每个页面必须调用一次mui.init(),可以参数为空
            mui.init({
                pullRefresh: {
                    container: "#main-list", //下拉刷新容器标识,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() {
                            mui('#main-list').pullRefresh().endPulldown();//结束下拉刷新动画
                            mui('#main-list').pullRefresh().refresh(true);//重置上拉加载状态
                            loadListDate("down",{},0);//从服务器端加载列表数据
                        } //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                    },
                    up: {
                        height: 50, //可选.默认50.触发上拉加载拖动距离
                        auto: false, //可选,默认false.自动上拉加载一次
                        contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
                        contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
                        callback: function() {
                            renderPreloadData();//渲染预加载数据
                        } //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                    }
                }
            })
            mui.ready(function(){
                //从服务器端加载列表数据
                loadListDate("down",{},0);//页面载入之后的第一次加载
            })
            mui.plusReady(function(){
                //隐藏滚动条
                plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
                //监听自定义事件
                window.addEventListener('refresh', function(event){
                    mui('#mui-list').pullRefresh().refresh(true);//重置上拉加载状态
                    loadListDate("down",{},0);//从服务器端加载列表数据
                })
            })
        </script>
    </body>
</html>
列表页代码

详情页代码

WebApp-mui列表页上拉加载下拉刷新 跳转详情页WebApp-mui列表页上拉加载下拉刷新 跳转详情页
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <title>Document</title>
    <style type="text/css">
        [v-cloak] {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">标题</h1>
    </header>
    <div id="main-content" class="mui-content" v-cloak>
        <div>货源ID:{{info.goods_id}}</div>
        <div>货主姓名:{{info.goods_user_name}}</div>
        <div>货物类型:{{info.goods_type}}</div>
        <div>发货数量:{{info.user_send_out_num}}</div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/skzj.js"></script>
    <script type="text/javascript">
        
        //Vue初始化 - 开始
        var pub_main_content = new Vue({
            el: "#main-content",
            data: {
                info: {}
            },
            methods: {
                
            }
        });
        //Vue初始化 - 结束
        
        //公共方法 - 开始
        function loadInfo(id) {
            mui.ajax(skzj.host + "/api/1.0/market/goods/" + id + "/details",{
                data:{
                    userphone: localStorage.getItem("userphone"),
                    token: localStorage.getItem("token")
                },
                dataType:'json',//服务器返回json格式数据
                type:'post',//HTTP请求类型
                timeout:5000,//超时时间设置为5秒;
                headers:{'Content-Type':'application/json'},                  
                success:function(data){
                    if (data.success === true) {
                        pub_main_content.info = Object.assign(data,pub_main_content.info);

                    } else if(data.success === false) {
                        
                    } else{
                        
                    }
                },
                error:function(xhr,type,errorThrown){
                    //如果Ajax过程出现报错
                }
            });
        }
        //公共方法 - 结束
        
        //每个页面必须调用一次mui.init(),可以参数为空
        mui.init();
        mui.ready(function(){

        })
        mui.plusReady(function(){
            var info = plus.webview.currentWebview().info;
            pub_main_content.info = info;
            loadInfo(info.goods_id);
        })
    </script>
</body>
</html>
详情页