最近在开发手机端APP页面功能时遇到一个需求:某个页面查询的数据有三种分类，需要展示在同一页面上,用户通过点击分类标签来查看不同类型的数据， 期望效果是

用户点击标签切换时另一个页面能够以一个平滑切入的方式展示数据.

示意图如下：

话不多说了．

首先上CSS

  1. <style type="text/css">
  2.  html, body{
  3.     height: 100%;
  4.  }
  5.  body{
  6. 	overflow:hidden; /*设置超出页面部分隐藏*/
  7. 	margin: 0;/*初始化页面默认边距*/
  8.         padding: 0;
  9.         font-family: sans-serif;
  10.  }
  11. .page-title-text {
  12.     padding-left: 17%;
  13. }
  15.  .layui-select-condition {
  16.  	position:fixed;
  17.  	padding-top: 16px;
  18.  	width:100%;
  19.         display: none;
  20.         z-index:999;
  21.         background-color: white;
  22.  }
  24. .layui-form-select .layui-input {
  25.     padding-right: 30px;
  26.     cursor: pointer;
  27.     border: 0px;
  28. }
  29. .layui-bottom button{
  30.     border: none;
  31.     line-height: 50px;
  32.     height: 50px;
  33.     width: 100%;
  34. }
  36. .line-block-container{
  37. 	display: inline;
  38.     width: 100%;
  39.     line-height: 20px;
  40.     margin-left: 3%;
  41.     padding: 0;
  42. }
  43. .layui-tab-title li a{
  44.     display: inline-block;
  45.     background: rgb(255 255 255);
  46.     color: #5d5d5d;
  47.     border: 1px solid #5d5d5d;
  48.     width: 26%;
  49.     height: 20px;
  50.     line-height: 20px;
  51.     text-align: center;
  52.     font-size: 12px;
  53.     position: absolute;
  54.     top: 22%;
  55. }
  56. .layui-tab-title li a {
  57.     display: inline-block;
  58. }
  59. .zui-col-fitable{
  60. 	margin-left: 5%;
  61.     margin-right: 6%;
  62.     padding: 0;
  63.     position:relative;
  64. }
  65. .zui-line-separater{
  66.     height: 2px;
  67.     margin-left: 3%;
  68. }
  69. hr{
  70. 	margin:3px 0;
  71. }
  72. .zui-col-fitable input{
  73. 		border:0;
  74. 		outline:none;
  75.     }
  76. #alarmTime:focus{
  77.         border:1px solid #66ccff!important;
  78.     }
  79.  /*给三个子页面的容器添加CSS，设置布局为相对布局的原因是为了实现页面切换效果*/
  80. .zui-slide-container{
  81. 	position:relative;
  82. 	margin-top: 50px;
  83. 	height:100%;
  84. 	width:100%;
  85. 	overflow:hidden;
  86. 	text-align: center;
  87. }
  88. /*给子页面的div设置为绝对定位与父容器的相对定位结合使用实现div布局*/
  89. .zui-slide-container>div{
  90. 	position: absolute;
  91.         width: 100%;
  92.         height: 100%;
  93.         box-sizing: border-box;
  94.         -webkit-transition: all 0.25s ease-in-out;　/*为页面设置显示时的切换效果与切换速度,可以在浏览器中调整切换速度来找到自己合适的速度*/
  95.         transition: all 0.25s ease-in-out;
  96.         top: 0;
  97. }
  98. /*
  99.   设置各个页面的初始位置，后面会有用到
  100. */
  101. #alarmLevel1{
  102. 	left:-100%
  103. }
  104. #alarmLevel2{
  105. 	left:-100%
  106. }
  107. #alarmLevel3{
  108. 	left:-100%
  109. }
  110. /*
  111.     设置当各个子DIV添加move的CSS时,div的位置
  112. */
  113. #alarmLevel1.move{
  114.     left: 0;
  115. }
  116. #alarmLevel2.move{
  117.     left: 0;
  118. }
  119. #alarmLevel3.move{
  120.     left: 0;
  121. }
  123. .div-align-right{
  124. 	left:100%
  125. }
  126. .div-align-left{
  127. 	left:-100%
  128. }
  129. #tpl span{
  130.     margin: 0;
  131.     padding: 0;
  132.     float: left;
  133. }
  134. .zui-this{
  135. }
  136. </style>

上页面布局：

  1. <div class="div-main">
  2. 		<div class="page-title">
  3. 			<div class="layui-row" style="color:#ffffff">
  4. 				<div class="layui-col-xs4">
  5. 		      		<div class="back-area">
  6. 						<i class = "layui-icon layui-icon-left" onclick="getBack()"></i>
  7. 					</div>
  8. 		      	</div>
  9. 				<div class="layui-col-xs4">
  10. 		      			<div class="page-title-text">
  11. 							预警层级
  12. 						</div>
  13. 		      	</div>
  14. 				<div class="layui-col-xs4">
  15. 		      	</div>
  16. 		    </div>
  17. 		</div>
  18. 		<div class="div-main-body">
  19. 			<div class="layui-tab layui-row layui-tab-brief" lay-filter="dataContainer" style="margin: 0px;">
  20. 				<ul class="layui-tab-title">
  21. 					<li style="display:inline;padding:0px;">
  22. 						<div style="position:relative;height:40px;">
  23. 							<a href="#alarmLevel1" data-level = "1" data-brother="alarmLevel2,alarmLevel3" style="border-radius:5px 0px 0px 5px;left: 11%;">层级一</a>
  24. 							<a href="#alarmLevel2" data-level = "2" data-brother="alarmLevel1,alarmLevel3" style="border-radius: unset;left:37%">层级二</a>
  25. 							<a href="#alarmLevel3" data-level = "3" data-brother="alarmLevel2,alarmLevel1" style="border-radius:0px 5px 5px 0px;left:63%">层级三</a>
  26. 						</div>
  27. 					</li>
  28. 				</ul>
  29. 			</div>
  30. 			<div class="zui-slide-container">
  31. 			  		<div id="alarmLevel1" style="width:100%;height:100%;position:absolute;">
  32. 			  			<table id="alarmLevelGrid1" lay-filter="alarmLevel1" class="layui-hide"></table>
  33. 			  		</div>
  34. 			  		<div id="alarmLevel2" style="width:100%;height:100%;position:absolute;" >
  35. 			  			<table id="alarmLevelGrid2" lay-filter="alarmLevel2" class="layui-hide"></table>
  36. 			  		</div>
  37. 			  		<div id="alarmLevel3" style="width:100%;height:100%;position:absolute;">
  38. 			  			<table id="alarmLevelGrid3" lay-filter="alarmLevel3" class="layui-hide"></table>
  39. 			  		</div>
  40. 			 </div>
  41. 		</div>
  42. </div>

布局没什么好说的，主要就是根据原型图来设置各个ｄｉｖ的位置．

上javascript代码

  1. <script type="text/javascript">
  2. 	"use strict"
  3. 	var table = layui.table;
  4. 	var $ = layui.jquery;
  6. 	loadTableData();
  8. 	function loadTableData(){
  9. 		var alarmLevel = $("zui-this").attr("data-level");
  10. 		loadData({"alarmLevel":alarmLevel});
  11. 	}
  13. 	function loadData(searchParams){
  14. 			  table.render({
  15. 			    elem: '#alarmLevelGrid1'
  16. 			    ,id:'alarmLevelGrid1'
  17. 			    ,url:'xxxx/xxx/getData'
  18. 			    ,toolbar: false
  19. 			    ,title: '预警层级记录表'
  20. 			    ,totalRow: false
  21. 			    ,limits:[3,5,10,20]
  22. 			    ,limit:5
  23. 			    ,cols: [[
  24. 			      {
  25. 					  field:'alarmLevel',  // 只需要在此处选择一个必定存在的元素作为渲染条件即可
  26. 					  title:'预警层级',
  27. 					  width:400,
  28. 					  templet:'#alarmLevelTpl'
  29. 				}
  30. 			    ]]
  31. 			    ,page: true
  32. 			    ,where :{"alarmLevel":"1"}
  33. 			    ,response: {
  34. 			      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
  35. 			    }
  36. 			    ,parseData: function(res){
  37. 			     return {
  38. 			        "code": res.code==0?200:404, //解析接口状态
  39. 			        "msg": res.msg, //解析提示文本
  40. 			        "count": res.total, //解析数据长度
  41. 			        "data": res.level //解析数据列表
  42. 			      };
  43. 			    }
  44. 				,done: function (res, curr, count){
  45.                                               // done函数的妙用，利用表格数据完成后，调整对应的css可以将layui的pc端表格设置成兼容手机端模式
  46. 						$("div[lay-id=alarmLevelGrid1]").css("margin-top", "11%");
  47. 						layui.$('.layui-table-view .layui-table').css("width","100%");
  48. 						layui.$('table tbody tr td div').attr("class","");
  49. 						layui.$('table tbody tr td').css("display","inline-flex");
  50. 						layui.$('table tbody tr td').css("border-width","1px");
  51. 						layui.$('table tbody tr td').css("border-color","#66CCFF");
  52. 						layui.$('table tbody tr td').css("border-radius","1rem");
  53. 						layui.$('table tbody tr td').css("border-style","solid");
  54. 						layui.$('table tbody tr td').css("margin-left","3%");
  55. 						layui.$('table tbody tr td').css("width","94%");
  56. 						layui.$('table tbody tr td').css("padding-left","12px");
  57. 						layui.$('table tbody tr td').removeAttr("data-content");
  58. 						layui.$('table tbody tr td').removeAttr("data-edit");
  59. 						// 隐藏手机端不需要的部分
  60. 						layui.$('.layui-table-header').css("display","none");
  61. 						layui.$('.layui-table-tool').css("display","none");
  62. 						layui.$('.layui-table-total').css("display","none");
  64. 						// 处理分页条内容
  65. 						layui.$('.layui-table-page').css("width","100%");
  67. 						$('.layui-laypage-skip').remove();
  68. 						layui.$('table').css("border-collapse","separate");
  69. 						layui.$('table').css("border-spacing","0px 10px");
  71. 					}
  72. 			  });
  74. 			   table.render({
  75. 			    elem: '#alarmLevelGrid2'
  76. 			    ,id:'alarmLevelGrid2'
  77. 			    ,url:'xxxx/assf/xx/getData'
  78. 			    ,toolbar: false
  79. 			    ,title: '预警层级记录表'
  80. 			    ,totalRow: false
  81. 			    ,limits:[3,5,10,20]
  82. 			    ,limit:5
  83. 			    ,cols: [[
  84. 			      {
  85. 					  field:'alarmLevel',  // 只需要在此处选择一个必定存在的元素作为渲染条件即可
  86. 					  title:'预警层级',
  87. 					  width:400,
  88. 					  event: 'viewDetail',
  89. 					  templet:'#alarmLevelTpl'
  90. 				}
  91. 			    ]]
  92. 			    ,page: true
  93. 			    ,where :{"alarmLevel":"2"}
  94. 			    ,response: {
  95. 			      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
  96. 			    }
  97. 			    ,parseData: function(res){
  98. 			     return {
  99. 			        "code": res.code==0?200:404, //解析接口状态
  100. 			        "msg": res.msg, //解析提示文本
  101. 			        "count": res.total, //解析数据长度
  102. 			        "data": res.level //解析数据列表
  103. 			      };
  104. 			    }
  105. 				,done: function (res, curr, count){
  106. 						$("div[lay-id=alarmLevelGrid2]").css("margin-top", "11%");
  107. 						layui.$('.layui-table-view .layui-table').css("width","100%");
  108. 						layui.$('table tbody tr td div').attr("class","");
  109. 						layui.$('table tbody tr td').css("display","inline-flex");
  110. 						layui.$('table tbody tr td').css("border-width","1px");
  111. 						layui.$('table tbody tr td').css("border-color","#66CCFF");
  112. 						layui.$('table tbody tr td').css("border-radius","1rem");
  113. 						layui.$('table tbody tr td').css("border-style","solid");
  114. 						layui.$('table tbody tr td').css("margin-left","3%");
  115. 						layui.$('table tbody tr td').css("width","94%");
  116. 						layui.$('table tbody tr td').css("padding-left","12px");
  117. 						layui.$('table tbody tr td').removeAttr("data-content");
  118. 						layui.$('table tbody tr td').removeAttr("data-edit");
  119. 						// 隐藏手机端不需要的部分
  120. 						layui.$('.layui-table-header').css("display","none");
  121. 						layui.$('.layui-table-tool').css("display","none");
  122. 						layui.$('.layui-table-total').css("display","none");
  124. 						// 处理分页条内容
  125. 						layui.$('.layui-table-page').css("width","100%");
  127. 						$('.layui-laypage-skip').remove();
  128. 						layui.$('table').css("border-collapse","separate");
  129. 						layui.$('table').css("border-spacing","0px 10px");
  131. 					}
  132. 			  });
  133. 			table.render({
  134. 			    elem: '#alarmLevelGrid3'
  135. 			    ,id:'alarmLevelGrid3'
  136. 			    ,url:'xxxx/sxxx/getData'
  137. 			    ,toolbar: false
  138. 			    ,title: '预警层级记录表'
  139. 			    ,totalRow: false
  140. 			    ,limits:[3,5,10,20]
  141. 			    ,limit:5
  142. 			    ,cols: [[
  143. 			      {
  144. 					  field:'alarmLevel',  // 只需要在此处选择一个必定存在的元素作为渲染条件即可
  145. 					  title:'预警层级',
  146. 					  width:400,
  147. 					  event: 'viewDetail',
  148. 					  templet:'#alarmLevelTpl'
  149. 				}
  150. 			    ]]
  151. 			    ,page: true
  152. 			    ,where :{"alarmLevel":"3"}
  153. 			    ,response: {
  154. 			      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
  155. 			    }
  156. 			    ,parseData: function(res){
  157. 			     return {
  158. 			        "code": res.code==0?200:404, //解析接口状态
  159. 			        "msg": res.msg, //解析提示文本
  160. 			        "count": res.total, //解析数据长度
  161. 			        "data": res.level //解析数据列表
  162. 			      };
  163. 			    }
  164. 				,done: function (res, curr, count){
  165. 						$("div[lay-id=alarmLevelGrid3]").css("margin-top", "11%");
  166. 						layui.$('.layui-table-view .layui-table').css("width","100%");
  167. 						layui.$('table tbody tr td div').attr("class","");
  168. 						layui.$('table tbody tr td').css("display","inline-flex");
  169. 						layui.$('table tbody tr td').css("border-width","1px");
  170. 						layui.$('table tbody tr td').css("border-color","#66CCFF");
  171. 						layui.$('table tbody tr td').css("border-radius","1rem");
  172. 						layui.$('table tbody tr td').css("border-style","solid");
  173. 						layui.$('table tbody tr td').css("margin-left","3%");
  174. 						layui.$('table tbody tr td').css("width","94%");
  175. 						layui.$('table tbody tr td').css("padding-left","12px");
  176. 						layui.$('table tbody tr td').removeAttr("data-content");
  177. 						layui.$('table tbody tr td').removeAttr("data-edit");
  178. 						// 隐藏手机端不需要的部分
  179. 						layui.$('.layui-table-header').css("display","none");
  180. 						layui.$('.layui-table-tool').css("display","none");
  181. 						layui.$('.layui-table-total').css("display","none");
  183. 						// 处理分页条内容
  184. 						layui.$('.layui-table-page').css("width","100%");
  186. 						$('.layui-laypage-skip').remove();
  187. 						layui.$('table').css("border-collapse","separate");
  188. 						layui.$('table').css("border-spacing","0px 10px");
  190. 					}
  191. 			  });
  192. 	  }
  194. 	function selectDefault(){
  195. 		$("a[data-level = 1]").click();
  196. 	}
  197. 	// 为导航栏目添加绑定事件
  198.         /*
  199.           该段js代码的核心就是当点击类型标签时，为对应的div　添加move　样式(上述css中有写)，
  200.           同时移除其他两个div的move样式,这样就可以实现页面滑动切换的效果啦．这样的动态效果还有很
  201.           多例如:旋转,栅格等等，感兴趣的读者朋友可以自行试验
  202.         */
  203. 	$('a[data-level=1]').click(function(e){
  204. 	  if($(this).hasClass("zui-this"))
  205. 		return;
  206. 	  reloadTable("alarmLevelGrid1",{"alarmLevel":"1"});
  207. 	  resetSelectedStyle();
  208.           $(".zui-this").removeClass("zui-this");
  209.           $(this).addClass("zui-this");
  210. 	  renderSelectedStyle(this);
  211.            e.preventDefault();
  212.     	 $('#alarmLevel2').removeClass("move");
  213.     	 $('#alarmLevel1').removeClass("div-align-left");
  214.     	 $('#alarmLevel2').removeClass("div-align-right");
  215.     	 $('#alarmLevel3').removeClass("div-align-right");
  216.     	 $('#alarmLevel3').removeClass("move");
  217.     	 $('#alarmLevel1').toggleClass('move');
  218.      });	
  220. 	$('a[data-level=2]').click(function(e){
  222. 		if($(this).hasClass("zui-this"))
  223. 			return;
  224. 		reloadTable("alarmLevelGrid2",{"alarmLevel":"2"});
  225. 		resetSelectedStyle();
  226.         $(".zui-this").removeClass("zui-this");
  227.         $(this).addClass("zui-this");
  228. 		renderSelectedStyle(this);
  229.          e.preventDefault();
  230.          $('#alarmLevel2').toggleClass('move');
  231.          $('#alarmLevel2').removeClass("div-align-right");
  232.          $('#alarmLevel2').removeClass("div-align-left");
  234.          $('#alarmLevel1').removeClass("move");
  235.     	 $('#alarmLevel3').removeClass("move");
  236.      });		
  238. 	$('a[data-level=3]').click(function(e){
  239. 		if($(this).hasClass("zui-this"))
  240. 			return;
  241. 		reloadTable("alarmLevelGrid3",{"alarmLevel":"3"});
  242. 	 	resetSelectedStyle();
  243.         $(".zui-this").removeClass("zui-this");
  244.         $(this).addClass("zui-this");
  245. 		renderSelectedStyle(this);
  246.          e.preventDefault();
  247.          $('#alarmLevel1').removeClass("move");
  248.     	 $('#alarmLevel2').removeClass("move");
  249.     	 $('#alarmLevel1').toggleClass("div-align-right");
  250.     	 $('#alarmLevel2').toggleClass("div-align-right");
  251.     	 $('#alarmLevel1').removeClass("div-align-left");
  252.          $('#alarmLevel3').toggleClass('move');
  253.      });
  255.     // 由于css的就近原则，使用class 无法达到预期效果，使用jquery增加样式
  256.     function resetSelectedStyle(){
  257.     	$(".zui-this").css("color","#333");
  258. 	 	$(".zui-this").css("background-color","white");
  259.     } 
  261.     function renderSelectedStyle(elem){
  262.         $(elem).css("color","white");
  263.         $(elem).css("background-color","#1e9fff");
  264.     }  
  266. 	// 表格重载
  267. 	function reloadTable(gridLayId,params){
  268. 		let baseParam = {"isMobile":true};
  269. 		$.extend(true,baseParam,params);
  270. 		table.reload(gridLayId,{
  271. 			   page: {
  272. 	                    curr: 1
  273. 	                },
  274. 			 	where : baseParam
  275. 			});
  276. 	}
  277. 	// 返回
  278. 	function getBack(){
  279. 		clearContext();
  280. 		history.back(-1);
  281. 	}
  283. 	// 清理空间
  284. 	function clearContext(){
  285. 		c.remove("searchParams");
  286. 	} 
  288. 	function getUserName(d){
  289. 		if(d.writeUser){
  290. 			return d.writeUser.empName;
  291. 		}
  292. 		return "";
  293. 	}
  294. 	$(document).ready(function(){
  295. 		 selectDefault();
  296. 	});
  297. </script>

CSS实现页面切换时的滑动效果的更多相关文章

  1. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

  2. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  3. Android中实现整个视图切换的左右滑动效果

    Android中提供了一个Gallary,可以实现图片或者文本的左右滑动效果. 如何让整个视图都能实现左右滑动,达到类似于Gallary的效果呢?可以直接用一个开源的ViewFlow来实现.   项目 ...

  4. viewpager欢迎页面底部点的滑动效果

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layo ...

  5. vue 页面切换从右侧切入效果

    1.将切换的页面用transition包裹 <div class="index-content"> <transition> <router-view ...

  6. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  7. ViewPager之Fragment页面切换

    一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...

  8. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  9. AngularJs应用页面切换优化方案（转）

    目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...

随机推荐

  1. Testing Beta Round (Unrated)

    比赛链接:https://codeforces.com/contest/1390 A. 123-sequence 题意 给出一个只含有 $1,2,3$ 的数组,问使所有元素相同至少要替换多少元素. 题 ...

  2. BZOJ3998 弦论 【SAM】k小子串

    BZOJ3998 弦论 给一个字符串,问其第\(K\)小字串是什么 两种形式 1.不同起始位置的相同串只算一次 2.不同起始位置的相同串各算一次 首先建\(SAM\) 所有串的数量就是\(SAM\)中 ...

  3. 2017-2018 ACM-ICPC German Collegiate Programming Contest (GCPC 2017)（9/11）

    $$2017-2018\ ACM-ICPC\ German\ Collegiate\ Programming\ Contest (GCPC 2017)$$ \(A.Drawing\ Borders\) ...

  4. 【bzoj 3333】排队计划（线段树）

    n个数,求一次逆序对.接着有m次修改操作,把每次输入的位置p的数之后<=它的数取出来,从小到大排序后再放回空位里,求逆序对.(N,M<=500,000 , Ai<=10^9)思路:1 ...

  5. java——字符串常量池、字符串函数以及static关键字的使用、数组的一些操作函数、math函数

    字符串常量池: 字符串比较函数:  字符串常用方法:  字符串截取函数: 字符串截取函数:  static关键字使用: 要调用类中的static类型的变量的时候,可以用"类名.变量名&quo ...

  6. 迷宫城堡 HDU - 1269 判断有向图是否是强连通图

    为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<=100000),每个通道都是单向的,就是说若称某通道连通了A房间和B房间,只说明可以 ...

  7. Codeforces Round #643 (Div. 2) C. Count Triangles (数学公式)

    题意:给你四个正整数\(A,B,C,D\),且\(A\le B\le C \le D\),有\(A\le x\le B\le y\le C \le z\le D\),求最多有多少组\((x,y,z)\ ...

  8. XHXJ's LIS HDU - 4352 最长递增序列&数位dp

    代码+题解: 1 //题意: 2 //输出在区间[li,ri]中有多少个数是满足这个要求的:这个数的最长递增序列长度等于k 3 //注意是最长序列,可不是子串.子序列是不用紧挨着的 4 // 5 // ...

  9. 转载-cookie和session的窃取

    一.cookie的基本特性 如果不了解cookie,可以先到 wikipedia 上学习一下. http request 浏览器向服务器发起的每个请求都会带上cookie: GET /index.ht ...

  10. STM32 单片机的USART的奇偶校验 误区（坑）

    当STM32的串口配置成带有奇偶校验位的情况下,需要软件校验是否发生奇偶校验错误,硬件只是置起奇偶校验错误标志位,并将错误的数据放到DR寄存器中,同时置起RXEN标志位,如果使能中断还是会正常进入中断 ...