mpvue 중소 규모 프로그램을 위한 사용자 정의 탐색 구성 요소 개발 소개(코드 예)

이 글의 내용은 mpvue 중소 규모 프로그램을 위한 맞춤형 내비게이션 구성 요소 개발에 대한 소개입니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 됩니다.

이 노트는 주로 mpvue 기반의 작은 프로그램에서 사용자 정의 탐색에 대한 아이디어와 적용을 기록합니다. 다른 사람들에게 영감을 주기 위해 공유하세요. 오류나 최적화할 여지가 있으면 자유롭게 공유해 주세요.

미니 프로그램의 구성 항목 탐색 스타일을 사용자 정의로 설정하면 탐색 표시줄의 오른쪽 상단에 있는 캡슐 버튼만 유지됩니다. 이를 통해 탐색 표시줄의 개인화된 요구 사항을 구현할 수 있습니다. 실제 응용 프로그램에는 몰입형 비디오 재생 페이지가 포함됩니다.

미니 프로그램 7.0.0 이후 버전에서는 단일 페이지의 탐색 표시줄 사용자 정의를 지원하기 시작합니다. 페이지의 navigationStyle设置为custom만 변경하면 됩니다. mpvue의 구성 방법은 다음과 같습니다.

운영 체제와 모델마다 내비게이션 바 높이가 다르기 때문에 내비게이션 바를 사용자 정의하여 해결해야 할 핵심 문제는 내비게이션 바 높이의 호환성 문제입니다. 다른 모델.

위 그림과 같이 네비게이션 바는 상태바와 타이틀바 두 부분으로 구성되어 있습니다. 상태 표시줄은 시간 및 네트워크 상태를 표시하는 데 사용되는 열입니다. 전체 화면(노치 화면) 모델의 상태 표시줄은 다른 화면보다 훨씬 높습니다. 노치 화면이 있는 iOS 시스템은 44이고, 나머지는 20입니다. 패드 포함. Android 휴대폰의 가치는 훨씬 더 높습니다. WeChat의 apiwx.getSystemInfo를 통해 상태 표시줄(statusBarHeight)의 높이를 얻을 수 있습니다. 제목 표시줄 높이는 미니 프로그램 API를 통해 얻을 수 없습니다. 동일한 레벨의 여러 모델의 테스트 데이터를 통해 기본적으로 iOS에서는 44px, Android에서는 48px에 따라 계산할 수 있습니다.
이렇게 하면 statusBarHeight를 통해 상태 표시줄 높이를 얻은 다음 현재 시스템을 판단하고 해당 제목 표시줄을 추가하면 올바른 탐색 표시줄 높이를 얻을 수 있습니다.

템플릿의 HTML 코드: (미니 프로그램의 비디오 구성 요소는 가장 높은 수준을 가지며 일반 HTML 태그로 덮이지 않기 때문에 태그는 모든 탐색 모음 구성 요소에서 사용됩니다.):

<template>
    <p>
        <!-- 占位栏 -->
        <cover-view> </cover-view>
        <!-- 导航栏主体 -->
        <cover-view>
            <!-- 状态栏 -->
            <cover-view></cover-view>
            <!-- 标题栏 -->
            <cover-view>
                <!-- home及后退键 -->
                <cover-view>
                    <cover-view>
                    <cover-image></cover-image>
                    </cover-view>
                    <cover-view></cover-view>
                    <cover-view>
                    <cover-image></cover-image>
                    </cover-view>
                </cover-view>
                <!-- 标题 -->
                <cover-view>{{title}}</cover-view>
            </cover-view>
        </cover-view>
    </p>
</template>

js 코드:

    beforeMount() {
        const self = this;
        wx.getSystemInfo({
            success(system) {
                console.log(`system:`, system);
                self.statusBarHeight = system.statusBarHeight;
                self.platform = system.platform;

                let platformReg = /ios/i;
                if (platformReg.test(system.platform)) {
                    self.titleBarHeight = 44;
                } else {
                    self.titleBarHeight = 48;
                }

                self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
            }
        });
    },

사용자 정의 탐색 모음의 사용자 정의 가능한 콘텐츠: 제목 텍스트, 텍스트 색상, 제목 표시줄 배경 색상, 뒤로 버튼 표시 여부, 홈 버튼 주소. 샘플 코드는 다음과 같습니다.

<navigation-bar></navigation-bar>

이 글의 참고자료: WeChat Mini 프로그램 개발 기본 튜토리얼 https://www.html.cn/study/20.html

위 내용은 mpvue 중소 규모 프로그램을 위한 사용자 정의 탐색 구성 요소 개발 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!