상단 탐색 표시 줄 표시 단추 와 검색 상 자 를 유 니 앱 으로 구현 하 는 방법

최근 에 회사 에서 앱 을 만 들 려 고 했 는데 최종 적 으로 유 니 앱 프레임 워 크 를 사용 하여 개발 하기 로 결 정 했 습 니 다.하지만 디자인 도 를 저 에 게 주 었 을 때 저 는 자신 이 없 었 습 니 다.왜냐하면 그의 디자인 도 상단 이 이렇게 생 겼 기 때 문 입 니 다.

이 기능 은 작은 프로그램 에서 전혀 실현 할 수 없 기 때문에 이 영향 을 받 을 수 있 습 니 다.저 는 실현 할 수 없 을 것 같 습 니 다.그러나 저 는 문 서 를 뒤 돌아 보 았 을 때 이 기능 이 실현 할 수 있다 는 것 을 알 게 되 었 습 니 다.pages.json 에서 설정 만 하면 됩 니 다.
이것 은 공식 적 으로 app-plus 라 고 부 르 며 네 비게 이 션 영역 을 사용자 정의 할 수 있 습 니 다.구체 적 인 설정 은 다음 과 같 습 니 다.

"pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarBackgroundColor": "#00c170",
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "buttons": [ 
                            {
                                "text": "  ", 
                                "fontSize":"16",
                                "float": "right",
                                "color":"#fff"
                            },
                            {
                                "text": "  ", 
                                "fontSize":"16",
                                "float": "left",
                                "color":"#fff"
                            }
                        ],
                        "searchInput":{
                                "align": "center",
                                "placeholder": "         ",
                                "borderRadius":"50upx",
                                "backgroundColor": "#fff"
                            }
                    }
                }
            }
        }    ]

효 과 는 다음 과 같 습 니 다:

내 클릭 이벤트 와 입력 상자 이 벤트 를 어떻게 감청 하 는 지 물 어 볼 수 있 습 니 다.
유 니 앱 은 api,onNavigation BarButtonTap,onNavigation BarSearch Input Changed 를 보 여 주 었 습 니 다.응답 페이지 에 쓰 면 됩 니 다.

export default {
        onNavigationBarButtonTap() {
            console.log("      ")
        },
        onNavigationBarSearchInputChanged () {
            console.log("      ")
        }
}

인쇄 결과:

그런데 버튼 이 두 개 있 는데 버튼 이 하나 밖 에 없어 요.이 벤트 는 어떻게 해요?그리고 입력 상자 의 문 자 를 어떻게 가 져 옵 니까?사실 이 두 함수 가 하나의 값 을 받 는 것 은 바로 대응 하 는 정보 이다.

export default {
    onNavigationBarButtonTap(val) {
        console.log(val)
    },
    onNavigationBarSearchInputChanged (val) {
        console.log(val)
    }    
}

인쇄 결과:

단추 이 벤트 는 대응 하 는 text 에 따라 판단 하면 되 며,입력 상자 가 감청 하 는 것 은 change 이벤트 가 아니 라 input 이벤트 입 니 다.즉,입력 하면 초점 을 잃 지 않 고 감청 할 수 있 습 니 다.
이게 끝 인 줄 알 아?NoNoNo,눈치 빠 른 친구 들 은 제 가 만 든 것 과 설계도 가 차이 가 있다 는 것 을 알 게 되 었 습 니 다.오른쪽 지도 에 icon 이 있 는데 제 가 쓰 지 않 았 습 니 다.만약 에 위의 방법 으로 추가 할 수 없 지만 저 희 는 네 비게 이 션 바 의 사용자 정의 를 없 앨 수 있 습 니 다.
page.json 에 있 는 모든 페이지 의 네 비게 이 션 표시 줄 은 기본적으로 열 려 있 습 니 다.navigationStyle 속성 이 있 습 니 다.기본 값 은 default 입 니 다.우 리 는 그것 을 custom 으로 바 꾸 면 그 를 제거 할 수 있 습 니 다.

{
  "path": "pages/index/index",
  "style": {
     "navigationStyle":"custom"
}

그러나 이동 단 내 비게 이 션 은 여전히 존재 합 니 다.이것 은 우리 가 title NView 라 는 속성 을 사용 해 야 합 니 다.이것 은 내 비게 이 션 표시 줄 을 전문 적 으로 설정 하 는 것 입 니 다.구체 적 으로 다음 과 같 습 니 다.

{
            "path" : "pages/secondPage/secondPage",
            "style" : {
                "navigationStyle": "custom",
                "app-plus": {  
                    "titleNView": false  
                }
            }
        }

그리고 우 리 는 스스로 네 비게 이 션 을 쓸 수 있 습 니 다.마지막 효 과 는 다음 과 같 습 니 다.

여기에 구덩이 가 하나 있 습 니 다.이 네 비게 이 션 에 고정 적 인 위 치 를 설정 하 는 것 을 제외 하고 실제 핸드폰 맨 위의 상태 표시 줄,즉 이 위 치 는 투명 합 니 다.왜냐하면 우 리 는 기본 적 인 네 비게 이 션 을 제 거 했 기 때 문 입 니 다.

그래서 우리 가 내 비게 이 션 을 쓸 때 위의 안쪽 거 리 는 아래 의 것 보다 조금 더 커 야 커버 상태 표시 줄 을 확보 할 수 있다.
다음은 내 가 쓴 소스 코드 이다.

<template>
    <view class="head">
        <view class="header-wrap">
            <view class="index-header">
                <text class="address" v-if="leftWords">{{leftWords}}</text>
                <view class="input-wrap" v-if="input">
                    <input type="text" 
                           placeholder="     "
                            v-model="value"
                           @change="inputChange"/>
                    <text class="iconfont iconfangdajing"></text>
                </view>
                <view class="map-wrap"
                      v-if="rightWords||rightIcon"
                      @click="rightClick">
                    <text class="iconfont" :class="rightIcon"></text>
                    <text>{{rightWords}}</text>
                </view>
            </view>
        </view>
        <view class="blank"></view>

    </view>
</template>

<script>
    export default {
        name: "IndexHeader",
        props: [
            'leftWords',
            'input',
            'rightIcon',
            'rightWords'
        ],
        data () {
            return {
                value: ''
            }
        },
        methods: {
            inputChange: function () {
                this.$emit('change',this.value)
            },
            rightClick: function () {
                this.$emit("rightClick")
            }
        }
    }
</script>

<style lang="scss">
    $color-base: #00c16f; 
    $words-color-base: #333333;
    $words-color-light: #999999; 
    .header-wrap {
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 999;
        
        .index-header {
            height: 88upx;
            line-height: 88upx;
            padding: 0 30upx;
            padding-top: 40upx;
            background-color: $color-base;
            font-size: 28upx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .address {
                font-size: 26upx;
            }
            
            .input-wrap {
                width: 500upx;
                height: 70upx;
                padding: 10upx 30upx 10upx 100upx;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 50upx;
                color: $words-color-base;
                position: relative;
                
                text {
                    position: absolute;
                    left: 40upx;
                    top: -8upx;
                    color: $words-color-light;
                    font-size: 30upx;
                }
            }
            
            .map-wrap {
                .iconfont {
                    font-size: 32upx;
                    margin-right: 5upx;
                }
                text {
                    font-size: 26upx;
                }
            }    
        }
    }
    .blank {
        height: 126upx;
    }
</style>

이상 은 유 니 앱 으로 상단 네 비게 이 션 표시 줄 표시 단추 와 검색 상 자 를 어떻게 실현 하 는 지 에 대한 자세 한 내용 입 니 다.유 니 앱 으로 상단 네 비게 이 션 표시 줄 표시 단추 와 검색 상 자 를 실현 하 는 지 에 대한 자 료 는 다른 글 을 주목 하 십시오!