MUI 상단 탭 사용-H5 튜토리얼-php.cn

1홈페이지 코드" >1홈페이지 코드

2서브페이지 코드" >2서브페이지 코드

3코드 설명" >3코드 설명

집

웹 프론트엔드

H5 튜토리얼

MUI 상단 탭 사용

一个新手

Oct 13, 2017 am 09:39 AM

용법 옵션 맨 위

서문

MUI는 기본 앱 경험에 가장 가까운 고성능 프런트 엔드 프레임워크입니다. 더 중요한 기능은 풀다운 새로 고침, 측면 슬라이딩 탐색 및입니다. 슬라이딩 트리거 조작. 메뉴 및 상단(하단) 탭 등

최근 MUI를 사용하여 모바일 앱을 만들 때 만난 작은 버그입니다. 그건 그렇고, 나는 이 tab-top-webview-main을 연구하고 여기에서 공유합니다.

1홈페이지 코드

<!doctype html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <style type="text/css">
            .d1{
                width: 100%;
                height: 50px;
                text-align: center;
                line-height: 50px;
                background-color: #CCCCCC;
                
            }
        </style>
    </head>
    <body>
        <p class="d1">我是p1,下面是插入的子页面</p>  <!--我们将在这个p下边插入子页面-->
        
    </body>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript">
        mui.init({
            subpages:[{                //下边是初始化，然后这个页面显示我们将插入的页面                
            url:"tab-top-webview-main.html",
                id:"tab-top-webview-main.html",
                styles:{
                    top:"50px",
                    bottom:"0px"
                }
            }]
        })    </script></html>

로그인 후 복사

2서브페이지 코드

<!DOCTYPE html><html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</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">
        <link rel="stylesheet" href="css/mui.min.css">
    </head>

    <body>
        <p class="mui-content">
            <p id="slider" class="mui-slider mui-fullscreen">
                <p id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <p class="mui-scroll">
                        <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                            推荐                        </a>
                        <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                            热点                        </a>
                    </p>
                </p>
            </p>
        </p>
        <script src="js/mui.min.js"></script>
        <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
        <script>
            mui.init();
            
            mui.plusReady(function() {                
            var group = new webviewGroup("tab-top-webview-main.html", {
                    items: [{
                        id: "tab-top-subpage-1.html",   //这是子页1的路径                        
                        url: "tab-top-subpage-1.html",
                        extras: {}
                    }, {
                        id: "tab-top-subpage-2.html",    //这是子页2的路径                        
                        url: "tab-top-subpage-2.html",
                        extras: {}
                    }],
                    onChange: function(obj) {                        
                    var c = document.querySelector(".mui-control-item.mui-active");                        
                    if(c) {
                            c.classList.remove("mui-active");
                        }
                        document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
                    }
                });
                mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {                    
                var wid = this.getAttribute("data-wid");
                    group.switchTab(wid);
                });

            });
            mui.back = function() {                
            var _self = plus.webview.currentWebview();
                _self.close("auto");
            }        </script>
    </body></html>

로그인 후 복사

3코드 설명

var group = new webviewGroup("tab-top-webview-main.html", {
    items: [{
        id: "tab-top-subpage-1.html",   //这是子页1的路径
        url: "tab-top-subpage-1.html",
        extras: {}
        }, {
            id: "tab-top-subpage-2.html",    //这是子页2的路径
            url: "tab-top-subpage-2.html",
            extras: {}
        }]
    })

로그인 후 복사

　1. 서브페이지 탭의 하이퍼링크 a의 data-wid="" 속성을 해당 서브페이지 탭 경로로 설정해야 합니다.

<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                            推荐</a>

로그인 후 복사

　　2. 여기에서 new webviewGroup("tab-top-webview-main.html",{}) 첫 번째 매개변수는 페이지 ID를 전달해야 합니다. 이 페이지 ID는 현재 js가 있는 페이지인 최상위 탭을 포함하는 페이지입니다

new webviewGroup("tab-top-webview-main.html", {}

로그인 후 복사

　　3. 항목 배열에 전달되는 것은 하위 페이지에 해당하는 탭입니다. 가져오기 서브페이지의 ID, 쉼표로 구분하여 서브페이지를 개수만큼 추가하세요

위 내용은 MUI 상단 탭 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7480

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

iPhone 15 Pro에서 기본 카메라 초점을 설정하는 방법 Sep 22, 2023 pm 11:53 PM

iPhone 15 Pro 모델에서 Apple은 기본 카메라로 촬영할 수 있는 세 가지 초점 거리 옵션을 도입했습니다. 이 문서에서는 이러한 옵션이 무엇인지, 그리고 사진 촬영 시 선호하는 기본 초점 거리를 설정하는 방법을 설명합니다. iPhone 15 Pro 및 iPhone 15 Pro Max의 향상된 카메라 시스템을 최대한 활용하기 위해 Apple은 기본 카메라의 광학 줌에 세 가지 다른 초점 거리 옵션을 추가했습니다. 표준 기본 1x(24mm) 모드 외에도 Apple은 1.2x(28mm) 및 1.5x(35mm) 설정을 추가했습니다. iPhone 15 Pro 사용자는 사진을 찍을 때 카메라 앱에서 1x 버튼을 탭하기만 하면 이러한 초점 거리 중에서 선택할 수 있습니다. 그러나 기술적인 이유로 인해 이러한 초점은

Apple Notes에서 블록 따옴표를 사용하는 방법 Oct 12, 2023 pm 11:49 PM

iOS 17 및 macOS Sonoma에서 Apple은 블록 따옴표 및 새로운 모노스타일 스타일을 포함하여 Apple Notes에 대한 새로운 서식 옵션을 추가했습니다. 사용 방법은 다음과 같습니다. Apple Notes의 추가 서식 옵션을 사용하면 이제 메모에 블록 따옴표를 추가할 수 있습니다. 블록 인용 형식을 사용하면 텍스트 왼쪽에 있는 인용 표시줄을 사용하여 글의 섹션을 시각적으로 쉽게 오프셋할 수 있습니다. "Aa" 형식 버튼을 탭/클릭하고 입력하기 전이나 블록 인용으로 변환하려는 줄에 있을 때 블록 인용 옵션을 선택하세요. 이 옵션은 체크리스트를 포함한 모든 텍스트 유형, 스타일 옵션 및 목록에 적용됩니다. 동일한 형식 메뉴에서 새로운 단일 스타일 옵션을 찾을 수 있습니다. 이것은 이전의 "동일 너비"의 개정판입니다.

수정: Windows 11에서 작업 표시줄의 도킹 옵션이 회색으로 표시됩니다. Sep 15, 2023 pm 05:35 PM

입력 도구 모음은 사용자가 + 키보드 단축키를 사용하는 대신 빠르게 입력을 전환할 수 있도록 하는 Windows의 중요한 기능입니다. 그러나 Windows 11에서 작업 표시줄의 도킹 옵션이 회색으로 나타나는 경우도 있습니다. WindowsSpacebar와 관련된 이 문제는 매우 흔한 것으로 보이며 해결책이 없습니다. 언어 설정을 변경하고 콘텐츠를 재구성해 보았으나 소용이 없었습니다. 마침내 근본 원인과 해결책을 찾았지만. Windows 11의 작업 표시줄에 입력 도구 모음을 도킹할 수 없는 이유는 무엇입니까? 하나의 언어만 설치되어 있으며 입력 도구 모음은 여러 언어로만 작동합니다. 언어가 올바르게 설치되지 않았습니다. 윈도우 11의 버그. 시스템 파일이나 사용자 프로필이 손상되었습니다. W의 경우

JSP 주석의 용도 및 분류 분석 Feb 01, 2024 am 08:01 AM

JSP 주석 분류 및 활용 분석 JSP 주석은 두 가지 유형으로 구분됩니다. 한 줄 주석: 로 끝나는 코드로 한 줄만 주석을 달 수 있습니다. 여러 줄 주석: /*로 시작하고 */로 끝나는 경우 여러 줄의 코드에 주석을 달 수 있습니다. 한 줄 주석 예 여러 줄 주석 예/**여러 줄 주석입니다*여러 줄의 코드에 주석을 달 수 있습니다*/JSP 주석 사용 JSP 주석을 사용하여 JSP 코드에 주석을 달면 읽기 쉬워집니다.

PHP 양식에서 체크박스와 라디오버튼을 처리하는 방법 Aug 11, 2023 am 08:39 AM

PHP 양식에서 체크박스와 라디오 버튼을 처리하는 방법 웹 개발에서 양식은 애플리케이션과 사용자 간의 데이터 상호 작용을 위한 주요 방법 중 하나입니다. 양식에서는 옵션을 선택하기 위해 체크박스와 라디오버튼을 사용해야 하는 경우가 있습니다. 이 글에서는 PHP에서 체크박스와 라디오 버튼을 처리하는 방법을 설명합니다. 1. 체크박스 처리 HTML에서는 <inputtype="checkbox&qu를 사용할 수 있습니다.

Edge 브라우저에서 인터넷 옵션을 여는 방법 Jan 03, 2024 pm 12:49 PM

IE 브라우저를 사용하는 친구들은 반드시 인터넷 옵션을 사용하여 설정하겠지만 엣지 브라우저에서는 찾을 수 없는데 어떻게 열 수 있나요? 실제로 설정하려면 엣지 브라우저에서 IE 브라우저만 열면 됩니다. 엣지 브라우저의 인터넷 옵션은 어디에 있습니까? 1. 엣지 브라우저에 들어가서 오른쪽 상단에 있는 세 개의 점을 클릭합니다. 2. 작업 표시줄에서 "추가 도구"를 선택합니다. 3. 새 인터페이스에서 "Internet Explorer로 열기"를 선택하십시오. 4. 새 브라우저의 오른쪽 상단에 있는 "기어 설정"을 클릭하세요. 5. 작업 표시줄에서 "인터넷 옵션"을 찾을 수 있습니다. 6. 설정을 입력하려면 클릭하세요.

WPSdateif 함수 사용 Feb 20, 2024 pm 10:27 PM

WPS는 일반적으로 사용되는 사무용 소프트웨어 제품군이며 WPS 테이블 기능은 데이터 처리 및 계산에 널리 사용됩니다. WPS 테이블에는 두 날짜 사이의 시차를 계산하는 데 사용되는 매우 유용한 함수인 DATEDIF 함수가 있습니다. DATEDIF 함수는 영어 단어 DateDifference의 약어입니다. 구문은 다음과 같습니다. DATEDIF(start_date,end_date,unit) 여기서 start_date는 시작 날짜를 나타냅니다.

C 언어에서 종료 기능을 올바르게 사용하는 방법 Feb 18, 2024 pm 03:40 PM

C 언어에서 종료 기능을 사용하려면 특정 코드 예제가 필요합니다. C 언어에서는 프로그램 초기에 프로그램 실행을 종료하거나 특정 조건에서 프로그램을 종료해야 하는 경우가 많습니다. C 언어에서는 이 기능을 구현하기 위해 exit() 함수를 제공합니다. 이 기사에서는 exit() 함수의 사용법을 소개하고 해당 코드 예제를 제공합니다. Exit() 함수는 C 언어의 표준 라이브러리 함수로 헤더 파일에 포함되어 있습니다. 그 기능은 프로그램 실행을 종료하는 것이며 정수를 취할 수 있습니다.

See all articles

MUI 상단 탭 사용

1홈페이지 코드

2서브페이지 코드

3코드 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제