关于自己移动端项目的整理

最新推荐文章于 2022-08-17 21:34:11 发布

weixin_33989780

最新推荐文章于 2022-08-17 21:34:11 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 javascript ViewUI

原文链接：https://juejin.im/post/5c6d357c6fb9a049c15fcca0

1.禁止页面返回上一页

// 禁止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function() {
    history.pushState(null, null, document.URL);
});复制代码

2.禁止微信浏览器下拉效果

document.body.addEventListener('touchmove', function (e) {
     e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android复制代码

3.mui实现tab切换+下拉加载

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>请假审批列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="js/flexible.min.js"></script>
    <link rel="stylesheet" href="mui-master/dist/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
	<style>
		*{ touch-action: pan-y;} 
		.topbar>div{width:50%;}
		.mui-content,body{background:#f5f5f5;}
		textarea{border:none;padding:0.34rem 0.4rem;}
		button{padding:0;}
		.mui-popover.mui-popover-action{position:fixed;bottom:0;}
		.mui-table-view-cell{padding:0;}
		.mui-table-view-chevron .mui-table-view-cell{padding-right:0;}
		.mui-table-view{background: #F5F5F5;}
		.mui-table-view:before,.mui-table-view:after,.mui-table-view-cell:after{height:0;}
		.mui-slider .mui-slider-group .mui-slider-item img{width:0.15rem}
		.mui-scroll{padding:0.3rem 0.18rem 0;}
		.titleList{display:flex;}
		.mui-segmented-control.mui-scroll-wrapper .mui-control-item{width:50%;line-height:0.98rem;font-size:0.32rem;background:#f5f5f5;border-bottom:2px solid transparent;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#31C27C;border-bottom:2px solid #31C27C;background:#f5f5f5;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border:0;background:#f5f5f5;}
		.mui-pull-bottom-wrapper{text-align:center;}
		.mui-segmented-control .mui-control-item{line-height:0.98rem;}
	</style>
	<script src="js/commen.js"></script>
</head>

<body>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="titleList">
                <a class="mui-control-item mui-active " href="#item1mobile" data-id="0"  >
                    待审批
                </a>
                <a class="mui-control-item" href="#item2mobile" data-id="1"  >
                    审批完成
                </a>
                <input type="hidden" id="status" value="0">
            </div>
        </div>
        <div class="mui-slider-group">
            <!--全部-->
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">

                        </ul>
                    </div>
                </div>
            </div>
            <!--待审核-->
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
							
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="mui-master/dist/js/mui.min.js"></script>
<script src="mui-master/dist/js/mui.pullToRefresh.js"></script>
<script src="mui-master/dist/js/mui.pullToRefresh.material.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });
        var pageNum=null;
        var pageNum1=1;
        var pageNum2=1;
        $.ready(function () {
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    up: {
                        auto: true, //自动执行一次上拉加载，可选；
                        show: true, //显示底部上拉加载提示信息，可选；      
                        contentrefresh: '正在加载...', //上拉进行中提示信息
                        contentnomore: '没有更多数据了', //上拉无更多信息时提示信息
                        callback:function () {
                            var self = this;                  
                            setTimeout(function () {
                            //获取四个不同的区块显示的位置
                                var ul = self.element.querySelector('.mui-table-view');
                                if(index == 0){
                                    pageNum=pageNum1++;
                                    createFragment(ul, index,self,pageNum);
                                }else if(index == 1){
                                    pageNum=pageNum2++;
                                    createFragment(ul, index,self,pageNum);
                                }
                            }, 100);
                        }
                    }
                });
            });

        });
    })(mui);
    function createFragment(ul, index,self,pageNum) {
        var fragment = document.createDocumentFragment();
        var status=null;
        if(index == 0){
            status=0;;
        }else if(index == 1){
            status=1;
        }
        var data = {
            page:pageNum,
            status: status
        };
        //请求后台数据
		var url = link + 'teacher/Leave/index';
        $.post(url, data, function (res) {
            var datas = res.data;
            if(res.code == 2){
				if (pageNum == 1 && status == 0) {
					var noDataStr = '<div class="noDataBox"><div>' +
						'<img class="nodeal" src="img/nodeal.png" style="width:80px;">' +
						'<p class="font24 color96 txt_c line50">还没有待审批哦！</p>' +
						'</div><div>';
					$('#item1mobile ul').html(noDataStr); 
				}
				if (pageNum == 1 && status == 2) {
					var noDataStr = '<div class="noDataBox"><div>' +
						'<img class="nodeal" src="img/nodeal.png" style="width:80px;">' +
						'<p class="font24 color96 txt_c line50">还没有审批完成哦！</p>' +
						'</div></div>';
					$('#item2mobile ul').html(noDataStr); 
				}
                self.endPullUpToRefresh(true);//当为true时，底部出现没有更多数据，并且不能滑动
            }else{
                for (var i = 0; i < datas.length; i++) {
					var str='';
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.id = res.data[i].id;
                    str += '<div class="listBox">'+
							'<div class="listHead line80">'+
								'<div class="color32 font32">'+res.data[i].title+'</div>';
								if ( res.data[i].status == '审批驳回' ) {
									str += '<div class="colorff0 font30">'+res.data[i].status+'</div>';
								} else {
									str += '<div class="color31 font30">'+res.data[i].status+'</div>';
								}
					str += '</div>'+
							'<p class="font28 color96 line50">开始时间：'+res.data[i].starttime+'</p>'+
							'<p class="font28 color96 line50">请假天数：'+res.data[i].days+'</p>'+
							'<div class="listFoot">'+
								'<img class="imgar" src="img/arror_r.png" alt="">'+
							'</div>'+
						'</div>';
                    li.innerHTML=str;
					fragment.appendChild(li);
                }
                ul.appendChild(fragment);//注意一定要插入使用appendChild，不是替换里面的数据用innerHTML,否则会出现没有文字提醒以及会出现很大的空白区
                self.endPullUpToRefresh();//当为false或空时，底部出现正在加载，滑动到下一页
            }
        });
    };
	mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() {
		//获取id
		var id = this.getAttribute("id");
		//打开请假详情
		mui.openWindow({
			id: '',
			url: 'leaveDetail.html?id='+id,
			waiting: {
				autoShow: true, //自动显示等待框，默认为true  
				title: '正在加载...' //等待对话框上显示的提示内容 
			}
		});
	})
	document.body.addEventListener('touchmove', function (e) {
	    e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
	}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
</script>
</body>
</html>
复制代码