uniapp은 app-plus를 사용하여 오른쪽에 사용자 지정 아이콘 + 텍스트 버튼으로 탐색 모음(titleNView)을 사용자 지정합니다.

머리말

• 최근 uni-app을 사용하여 H5 모바일 단말기를 작성할 때 pages.json 파일에서 내비게이션 바의 아이콘을 구성할 때 적용되지 않는 것을 발견했습니다.

• 오랜만에 공식 홈페이지 가서 확인해보니 로컬 사진은 지원하지 않는데 iconfont.ttf(iconfont 로컬 다운로드) 형식의 사진은 지원한다.

• 내비게이션 바의 아이콘을 다운로드하여 프로젝트 리소스 폴더에 로컬 형식으로 배치하려면 iconfont 아이콘 라이브러리에서 찾아야 함을 의미합니다.

제목NView 구성

 

구현 프로세스

1. iconfont 아이콘 라이브러리 웹사이트에 로그인하여 아이콘 다운로드- iconfont-Alibaba 벡터 아이콘 라이브러리를 찾습니다.

 

2. 다운로드 및 압축 해제 파일을 정적 파일 아래에 넣습니다. 내부 파일 구조는 다음과 같습니다.

 

3. pages.json 파일 아래 탐색 모음에서 텍스트 아이콘을 구성합니다.

 

4. 브라우저에서 다운로드 아이콘 형식을 보려면 다운로드 파일 구조에서 index.html을 클릭합니다.

 

5. 마지막으로 후속 작업을 계속하기 위해 페이지에서 오른쪽 버튼을 클릭했는지 여부를 모니터링할 수 있습니다. 이 탐색 표시줄이 있는 페이지로 이동합니다.

data平级位置
onNavigationBarButtonTap(e) {
    console.log("点击了自定义按钮"，e);
},

6. 렌더링

 

요약하다:

---

이 과정을 거쳐 앱플러스 커스텀 내비게이션 바(titleNView) 오른쪽에 있는 커스텀 아이콘 + 텍스트 버튼을 활용한 유니앱에 대한 1차적인 깊은 인상도 가지셨을 거라 생각합니다만, 실제 개발에서 마주한 상황은 확실히 다릅니다. 동일하므로 그 원리를 이해해야 하며 여전히 동일합니다. 어서 일꾼들을 때려라!

부족한 점이 있으면 지적해 주세요. 감사합니다 -- Fengguowuhen