uniapp 기본 제목 표시줄에 뒤로 버튼을 설정하는 방법

우리 모두 알고 있듯이 uniapp은 한 번 작성된 크로스 플랫폼, 멀티 엔드 프론트 엔드 프레임워크입니다. uniapp을 사용하여 모바일 앱을 개발하다 보면 제목 표시줄과 복귀 버튼을 추가해야 하는 경우가 많습니다. uniapp은 기본적으로 통합된 제목 표시줄과 복귀 버튼을 제공하지만 실제 개발에서는 제목 표시줄과 복귀 버튼을 개인화해야 하는 경우가 많습니다. 이번 글에서는 유니앱 기본 타이틀바에 뒤로가기 버튼을 설정하는 방법을 소개하겠습니다.

1. uniapp 기본 제목 표시줄 및 복귀 버튼

uniapp에서는 페이지의 "navigationBarTitleText"를 구성하여 페이지 제목을 설정할 수 있습니다. 동시에 페이지 라우팅에서 "navigationBarBackgroundColor", "navigationBarTextStyle" 및 기타 속성을 사용하여 제목 표시줄의 배경색과 전경색을 설정할 수 있습니다.

uniapp 기본 제목 표시줄은 자동으로 돌아가기 버튼을 생성하고, 페이지 라우팅의 깊이 관계에 따라 돌아가기 버튼에 해당 화살표와 텍스트를 표시합니다.

2. 유니앱 기본 복귀 버튼 개인화

복귀 버튼을 개인화하려면 버튼의 텍스트와 스타일을 수정하는 등 특별한 처리가 필요합니다.

uniapp은 복귀 버튼을 개인화할 수 있는 "onNavigationBarButtonTap" 및 "setNavigationBarTitle"이라는 두 가지 API를 제공합니다. 페이지의 수명 주기 메서드에서 이 두 API를 사용하여 뒤로 버튼을 개인화할 수 있습니다.

1. 복귀 버튼 텍스트 수정

"onNavigationBarButtonTap" API를 호출하여 반품 버튼의 클릭 이벤트를 캡처하고 이벤트 처리 메서드에서 반품 버튼 텍스트를 설정할 수 있습니다.

페이지 "onLoad" 메서드에 다음 코드를 추가하세요.

onLoad: function() {
  uni.showNavigationBarLoading()
  uni.onNavigationBarButtonTap(function(res) {
    console.log(res) // res.index 表示点击的按钮的索引，2 表示返回
  })
}

이벤트 처리 메서드에서 "setNavigationBarTitle" API를 호출하여 반환 버튼의 텍스트를 수정할 수 있습니다.

uni.setNavigationBarTitle({
    title: '自定义标题'
})

설정이 완료되면 뒤로 버튼의 텍스트가 "맞춤 제목"이 됩니다.

2. 복귀 버튼 스타일 수정

복귀 버튼의 아이콘, 색상, 크기 설정 등 반품 버튼의 스타일을 수정하려면 CSS 스타일 시트를 사용해야 합니다.

CSS 스타일 시트에서는 다음과 같은 방법으로 뒤로 버튼 스타일을 설정할 수 있습니다.

/* 修改返回按钮的图标 */
.page-navigation-bar .uni-icon-back {
  background-image: url(images/back.png);
}

/* 修改返回按钮的颜色 */
.page-navigation-bar .uni-tabbar-item-active {
  color: #007aff;
}

/* 修改返回按钮的大小 */
.page-navigation-bar .uni-tabbar-item-active {
  font-size: 30rpx;
}

3. 뒤로 버튼 숨기기/표시

일부 페이지에서 뒤로 버튼을 숨기려면 다음을 수행해야 합니다. "setNavigationBar" API를 사용하세요. 이 API를 통해 메인 제목, 부제목, 뒤로 버튼 표시 여부를 설정할 수 있습니다.

// 隐藏返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: true
})

// 显示返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: false
})

위는 유니앱 기본 제목 표시줄 복귀 버튼의 맞춤 설정입니다. 간단한 API 호출과 CSS 스타일 시트 설정을 통해 반환 버튼의 텍스트, 스타일 및 표시 상태를 쉽게 수정하여 시각적으로 독특한 제목 표시줄 효과를 얻을 수 있습니다.

위 내용은 uniapp 기본 제목 표시줄에 뒤로 버튼을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!