집 > 기사 > 위챗 애플릿 > WeChat 애플릿의 하단 탐색 모음 구현 코드

WeChat 애플릿의 하단 탐색 모음 구현 코드

不言원래의: 2018-08-16 15:47:078299검색

이 글의 내용은 위챗 애플릿 하단 네비게이션 바의 구현 코드에 대한 내용입니다. 도움이 필요한 친구들이 참고하시면 좋겠습니다.

하단 네비게이션 바어떻게 구현하나요? 즉, 하단의 탐색을 클릭하면 해당 페이지 간에 전환됩니다.

먼저 구현하려는 하단 탐색 모음의 렌더링을 살펴보겠습니다. (3개의 탐색 아이콘 예, WeChat 애플릿은 최대 5개까지 추가할 수 있습니다.)

#🎜 🎜#

1. 아이콘 준비

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

여기에서 일부 다운로드 인사 아바타, 홈 페이지, 기타 일반적으로 사용되는 아이콘 등 웹 사이트에서 사용하려는 아이콘을 직접 다운로드를 클릭하여 로컬에 저장하고 이름을 수정합니다. UI 준비 아이콘을 사용하는 것도 가능합니다.

프로젝트로 돌아가서 새 이미지 폴더를 만들고 방금 다운로드한 아이콘을 나중에 사용할 수 있도록 폴더 아래에 넣은 다음 위의 이름을 넣어주세요 애플릿 프로젝트 디렉터리에 새로 생성된 이미지 폴더에 아이콘이 저장되고 준비가 완료됩니다.

2 구성 파일을 추가합니다.

프로젝트를 찾습니다. 루트 디렉터리에 있는 app.json 구성 파일에 다음 구성 정보를 추가합니다(app.json 파일은 WeChat 애플릿을 전역적으로 구성하고, 페이지 파일 경로 결정, 창 성능 결정, 네트워크 시간 초과 설정, 여러 탭 설정 등에 사용됩니다). .)

   "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/test/test",
      "text": "测试"
    }
  ]
}

위 내용은 기본 부분일 뿐입니다. 물론 미니 프로그램의 공식 문서에서는 더 풍부한 구성 요소와 스타일을 제공합니다 #🎜🎜 #참조 문서: #🎜🎜 #https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK, 종료, 저장 및 컴파일하여 달성 미니 프로그램의 클래식 하단 탐색 작동됨

==============

Appendix: 완전한 코드(무시해도 됨)

#🎜 🎜##🎜🎜 #

{
  "pages":[
        "pages/index/index",
        "pages/category/category",
        "pages/topic/topic",        
        "pages/user/user",
        "pages/logs/logs"
  ],
  "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "WeiCMS",
        "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#8c8c8c",
    "selectedColor": "#f4645f",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }, 
    {
      "pagePath": "pages/category/category",      
      "text": "分类",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/topic/topic",      
      "text": "话题",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/user/user",      
      "text": "我的",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }  
    ],
    "position": "bottom"
  }  
}

WeChat 애플릿의 하단 탐색 모음 구현 코드

관련 기사