위챗 미니 프로그램 하단 내비게이션 바 개발에 대하여-미니 프로그램 개발-php.cn

위챗 미니 프로그램 하단 내비게이션 바 개발에 대하여

不言

풀어 주다： 2018-06-27 15:39:08

원래의

2931명이 탐색했습니다.

이 글에서는 위챗 애플릿 하단 탐색란 개발 관련 정보를 주로 소개합니다. 위챗 애플릿 하단에 아름다운 탐색란을 갖고 싶은데 어떻게 만드는지 모르겠어요. 그래서 Baidu는 이 기사를 발견하고 모든 사람과 공유했습니다. 필요한 경우 친구는

WeChat 애플릿의 하단 탐색 열 개발

먼저 렌더링을 살펴보겠습니다.

여기, 페이지가 3개이므로 탐색 아이콘을 3개 추가했습니다. WeChat 애플릿은 최대 5개까지 추가할 수 있습니다.

그럼 어떻게 나타나며 어떤 색으로 변하는 걸까요? 두 단계만 거치면 끝!

1. 아이콘 준비

알리바바 아이콘 라이브러리 http://www.iconfont.cn/collections/show/29

웹사이트에 들어가서 원하는 아이콘 위에 마우스를 올리고 다운로드 버튼을 클릭하세요. 아래

팝업 상자에서 서로 다른 색상의 아이콘 두 개를 선택하세요. 저는 png를 선택했습니다. 그런 다음 다운로드하여

위 이름을 저장합니다. 미니 프로그램 프로젝트 디렉터리에 새로 생성된 이미지 폴더에 준비가 완료되었습니다

2. 구성 파일을 변경합니다

프로젝트 루트 디렉터리에서 app.json 구성 파일을 찾아 추가합니다. 다음 구성 정보

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首页" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "开心测试" 
  }] 
 },

로그인 후 복사

해당 속성 정보를 설명하세요

tabBar는 하단 네비게이션 구성 속성을 의미합니다

color 선택하지 않았을 때 하단 네비게이션 텍스트의 색상

selectedColor 선택하지 않았을 때 하단 네비게이션 텍스트의 색상 selected

borderStyle 하단 탐색 테두리 샘플 색상(여기에 스타일을 작성하지 않으면 기본 연한 회색 선이 탐색 상자의 위쪽 테두리에 나타납니다)

list 탐색 구성 배열

selectedIconPath 선택 시 아이콘 경로

iconPath 선택하지 않은 경우 아이콘 경로

pagePath 페이지 액세스 주소

text 탐색 아이콘 아래 텍스트

자세한 스타일을 변경하려면