uniapp 작은 프로그램 사용자 정의 탐색 모음

1, 당신은 필요가 page.json 파일에서 다음과 같이 변경하면 사용자 지정 탐색 모음을 사용해야 할 경우

"페이지는": // HTTPS : //uniapp.dcloud.io/collocation/pages 페이지 배열 항목은 첫 번째 응용 프로그램 시작 페이지, 참조 표시 
        {
             "경로": "페이지 / 목록 / 색인" ,
             "스타일을" : {
                 "navigationBarTitleText": "목록" ,
                 "navigationStyle": "사용자 정의" // 추가 사용자 지정 구성 
            } 
        }, 
        {
             "경로": "페이지 / 인덱스 / 색인" ,
             "스타일" : {
                 "navigationBarTitleText": "홈" 
            } 
        } 
    ]

구성 후 2. 지정 탐색은 다음과 같은 문구가 있습니다

1)이 때, 다른 휴대 전화에 사용은 권장되지 않는다 iphonex 상태 막대의 높이를 고정

<템플릿> 
    <보기> 
        <View 클래스 = "STATUS_BAR는"> 
            <! - 여기에 상태 표시 줄이 -> 
        </ 전망> 
        <보기> 텍스트 상태 표시 줄 </ 전망> 
    </ 전망> 
</ 템플릿>     
< 스타일> 
    .status_bar { 
        높이 : VAR (--status - 바 - 높이), 
        폭 : 100 % ; 
        배경 : 적색; 
    }
 </ 스타일>

2) 해당 모델 정의 작성된 조정한다 자체는 모든 모델이 사용될 수있다

<템플릿> 
    <보기> 
        - <- 나는 50 픽셀의 텍스트 부분까지의 거리뿐만 아니라 상태 표시 줄을 가정 할 필요가!> 
        <View 클래스 = "STATUS_BAR"스타일 = "{높이 : 높이 50 + + 'PX'}" > 
            <텍스트> 목록 </ 텍스트> 
        </ 전망> 
        <보기> 텍스트 상태 표시 줄 </ 전망> 
    </ 전망> 
</ 템플릿>   

<스크립트> 
    내보내기 기본 { 
        데이터 () { 
            반환 { 
                높이 : 널 (null) , / / 위젯 상태 바 높이 
            } 
        } 
        의 onLoad () { 
            var에 _this = 이 본 ;
            // 전화 상태 표시 줄의 높이를 얻을 
            {(uni.getSystemInfo를
                성공 : (데이터) {
                     //이 에 할당 할 수있는이 
                    _this.height = data.statusBarHeight; 
                } 
            }) 
        } 
    } </ SCRIPT> 
<스타일> 
    .status_bar { 
        폭 : 100 % ; 
        배경 : #의 007AFF; 
        위치 : 상대 ; 
    } / * 제목의 상태 표시 줄의 위치 조정 * / 
    텍스트 { 
        위치 : 절대; 
        마진 : 자동; 
        하단 : 10px를, 
        왼쪽 : 0 ; 
        오른쪽 : 0 ; 기능


    
        텍스트 - 정렬 : 센터; 
    }
 </ 스타일>