WeChat 미니 프로그램 하단 탐색 컬럼 개발(코드 포함)

이 글은 위챗 미니 프로그램 하단의 탐색 컬럼(코드 포함) 개발 관련 정보를 주로 소개하고 있습니다. 위챗 미니 하단에 아름다운 네비게이션 컬럼이 있었으면 좋겠습니다. 프로그램인데 만드는 방법을 몰라서 바이두가 이 글을 찾아서 모두에게 공유했어요. 필요한 친구들은 참고하시면 됩니다

위챗 미니 하단 탐색란 개발 프로그램

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

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

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

1. 아이콘 준비

홈페이지에 접속하여 마음에 드는 아이콘에 마우스를 올려놓고 아래 다운로드 버튼을 클릭합니다

팝업 상자에서 서로 다른 색상의 아이콘 2개를 선택하고 크기를 64px로 선택한 후 다운로드하여 별칭을 지정합니다. 🎜>

위 이름의 아이콘을 미니 프로그램 프로젝트 디렉터리에 새로 생성된 이미지 폴더에 저장하세요.

준비가 완료되었습니다

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

프로젝트 루트 디렉터리에서 구성 파일 앱을 찾습니다. 🎜>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 선택했을 때 하단 네비게이션 텍스트의 색상

borderStyle 하단 네비게이션의 샘플 색상 테두리(여기에 스타일이 작성되지 않으면 기본 밝은 회색 선이 탐색 상자의 위쪽 테두리에 나타납니다)

목록 탐색 구성 배열

selectedIconPath 아이콘 선택되었을 때의 경로

iconPath 선택되지 않았을 때의 아이콘 경로

pagePath 페이지 접근 주소

text 네비게이션 아이콘 아래의 텍스트

읽어주셔서 감사합니다. 이는 모든 사람에게 도움이 될 수 있습니다. 이 사이트 지원에 대한 귀하의 지원에 감사드립니다!

위 내용은 WeChat 미니 프로그램 하단 탐색 컬럼 개발(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!