mui를 사용하여 개발해 본 적이 있나요? 이 글은 주로 mui 프레임워크를 사용한 첫 번째 모바일 개발 경험에 대한 자세한 설명을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
1. 상태 표시줄 설정
이제 대부분의 앱을 열면 상태 표시줄이 앱과 통합되어 아름다울 뿐만 아니라 전체와 조화를 이룹니다.
블로거는 중등도 강박장애 환자인데, 상단에 있는 작은 검은색 막대가 정말 불편해요.
먼저 HBuilder에서 새로운 모바일 APP 프로젝트를 생성합니다.
1.1 몰입형 상태 표시줄(투명 상태 표시줄)
일반적으로 페이지 전체가 그림인 경우 상태 표시줄이 투명해집니다.
먼저 현재 환경이 몰입형 상태 표시줄을 지원하는지 확인하세요. 감지 문:
<script type="text/javascript">
document.addEventListener('plusready', function(){
//是否支持沉浸式状态栏
alert(plus.navigator.isImmersedStatusbar());
});
</script>는 기본적으로 지원되지 않으며 false가 나타납니다. 환경에서 이를 지원하려면 프로젝트 아래에 매니페스트.json 구성 파일을 수정해야 합니다. 해당 파일을 연 후 코드 보기를 엽니다.
Add
"statusbar": {
"immersed": true
},코드 뷰 "plus" 아래 그림과 같이:
수정이 완료되면 true가 팝업되며 효과는 다음과 같습니다:
터미널 지원:
상태 표시줄 전체 화면은 상태 표시줄이 없고 배터리와 신호가 없음을 의미합니다. 표시됩니다.
이 효과는 JS 파일에 다음 명령문을 추가하는 것입니다:
<script type="text/javascript">
document.addEventListener('plusready', function(){
//参数：true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);
});
</script>효과는 다음과 같습니다:
1.3 상태 표시줄 배경색
배경색 수정은 일반적으로 배경색이 다음과 같은 시나리오에서 사용됩니다. 페이지 상단은 단색으로, 페이지와 일치하도록 수정되었습니다. 배경색은 페이지를 더욱 조화롭게 만듭니다.
//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');안드로이드 플랫폼에서는 이 기능을 지원하지 않습니다. 전문가가 있다면 조언 부탁드립니다.
2. 불투명 유리 효과
사진을 흐리게 하면 흐릿하고 아름다운 효과를 줄 수 있습니다. 이전에 언급되지 않은 이미지 흐림 효과를 클릭하세요:
css 속성 필터:
filter: blur(16px);
blur()의 픽셀은 흐림 정도입니다.
3. mui를 사용하면 페이지를 빠르게 만들 수 있습니다
가장 귀찮았던 상태 표시줄 문제가 해결되었고, 페이지 레이아웃도 다루기 쉬워졌습니다. mui 템플릿을 사용하여 빠르게 구축할 수 있습니다.
XX Music을 예로 들어보세요:
2.1 파일 가져오기
<script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="external nofollow" rel="stylesheet"/> <link rel="stylesheet" href="css/bofang.css" rel="external nofollow" />
2.2 HTML 코드
다음 HTML 코드는 사용된 mui 프레임워크 부분과 위의 상태 표시줄 관련 부분입니다. 이 mui 부분은 지역 캐러셀 부분에 관한 것입니다.
top img 완벽한 효과를 얻으려면 오버플로 속성을 유연하게 사용해야 하는 배경 이미지입니다.
APP의 헤더 부분에 사용된 위치 지정으로 인해 페이지의 주요 부분에 약 74px 높이의 패딩 탑을 추가해야 합니다.
<p class="mui-slider"> <p class="mui-slider-group"> <p class="mui-slider-item"> 第一个轮播区域 </p> <p class="mui-slider-item"> <p class="singer"> <span class="ce"></span> <span class="mui-text-center">G-DRAGON</span> <span class="ce"></span> </p> <p class="yinxiao"> <img src="img/player_btn_sq_hlight.png"/> <img src="img/player_btn_mv_normal.png"/> <img src="img/player_btn_dts_on.png"/> </p> <p class="datu"> <img src="img/GD.jpg"/> </p> <p class="geci">A Boy - G-DRAGON</p> </p> <p class="mui-slider-item"> 第二个轮播区域 </p> </p> <p class="mui-slider-indicator"> <p class="mui-indicator"></p> <p class="mui-indicator mui-active"></p> <p class="mui-indicator"></p> </p> </p>
메인 CSS 코드:
*{
padding: 0px;
margin: 0px;
}
body{
overflow: hidden;
height: 100vh;
}
#background{
overflow: hidden;
text-align: right;
}
#background #backImg{
margin-left: -120px;
height: 99vh;
filter: blur(16px);
}
.mui-bar-nav{
top: 30px;
background-color: rgba(0,0,0,0);
box-shadow: 0 0px 0px #ccc;
}
.mui-bar-nav .mui-title{
color: white;
font-size: 20px;
font-weight: normal;
line-height: 50px;
}
#continer{
width: 100%;
height: 100vh;
position: relative;
top: -100vh;
z-index: 5;
padding-top: 80px;
background-color: rgba(0,0,0,0.7);
text-align: center;
color: white;
}다양한 크기의 사진 정렬 센터에서는 한동안 아무 생각도 나지 않았다. 여기서는 유연한 레이아웃의 교차 축 정렬을 사용해야 합니다.
#continer .footer1{
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
}아래 효과 표시:
Little Q에는 할 말이 있습니다
블로거도 블로그를 작성할 때 자신의 능력을 향상하고 싶어하며, 또한 신들에게 조언을 구하십시오.
또한 프레임워크는 실제로 사용하기 쉽지만 블로거는 여전히 네이티브 코드를 먼저 마스터해야 한다고 생각합니다.
관련 권장 사항:
모바일 HTML5에서 MUI 프레임워크를 사용하는 방법 Mui는 jquery를 사용하고 클릭을 사용하여 새 창 예제 공유로 이동합니다. 예는 mui 풀업의 캡슐화 프로세스를 자세히 설명합니다. 더 많은 풀다운 새로 고침 데이터 로드위 내용은 mui 프레임워크를 사용한 간단한 모바일 개발 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
