집 > 기사 > 웹 프론트엔드 > WeChat 미니 프로그램의 tabBar 사용 정보(자세한 튜토리얼)

WeChat 미니 프로그램의 tabBar 사용 정보(자세한 튜토리얼)

亚连원래의: 2018-06-22 17:30:492261검색

이 글에서는 주로 WeChat 미니 프로그램에서 tabBar의 사용법을 소개하고, WeChat 미니 프로그램에서 tabBar의 기능, 구성 항목 사용 및 작동 주의 사항을 예제와 함께 자세히 분석합니다. 또한 독자가 다운로드할 수 있는 완전한 데모 소스 코드도 함께 제공됩니다. 필요하신 분들은 참고하세요

이 글은 위챗 애플릿에서 tabBar 사용법을 예시와 함께 설명하고 있습니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Principle: app.json

{
 "pages": [
  "index",
  "picDisplay"
 ],
 "window": {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "首页",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false
 },
 "tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }
}

3에서 tabBar 속성을 구성합니다. 키 코드

"tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

새 프로젝트를 생성하고, app.json 파일을 열고, 키 코드를 "window": {}에 복사하고, 아래와 같이 창 중괄호 앞에 쉼표를 추가하는 것에 주의하세요.

구성 tabBar 속성 값

"tabBar": {
  //设置tabBar文字默认颜色
  "color":"#666666",
  //设置tabBar文字被选中是的颜色
  "selectedColor":"#06bd04",
  //tab列表，数组类型，改数组内至少要有两个但不大于5个的tab对象
  "list": [{
   //设置tab跳转页面链接
   "pagePath": "index",
   //设置tab上的文字
   "text": "首页",
   //设置tab上的默认图标
   "iconPath": "images/index.png",
   //设置tab被选中时的图标
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

tabBar 5가지 공통 속성 및 구성 지침:

1) color: 선택한 글꼴 색상 없음

2) selectedColor: 선택한 글꼴 색상

3) borderStyle: 색상 탭바 흰색(흰색만 지원됨)과 검정색 위의 줄

4) BackgroundColor:tabbar 배경색

5) list: 탭 목록 항목을 설정합니다(최소 2개, 최대 5개 탭).

또한 목록은 배열 속성이고 각 항목은 개체입니다. 목록은 4가지 속성을 설정할 수 있습니다.

① text: 탭에 텍스트를 설정합니다.

② iconPath: 탭을 다음으로 설정합니다. be in the open 활성화되면 이미지 경로가 표시됩니다.

3 selectedIconPath: 탭 활성화 시 이미지 경로 설정(iconPath 및 selectedIconPath 이미지 크기 제한은 모두 40KB)

4 pagePath: 탭 터치 시 점프 페이지 경로 설정(이 페이지 페이지 단위로 구성해야 합니다)

위 내용은 나중에 모든 사람에게 도움이 되기를 바랍니다.

WeChat 미니 프로그램의 tabBar 사용 정보(자세한 튜토리얼)

관련 기사