위 챗 애플 릿 은 사용자 정의 구성 요소 내 비게 이 션 을 사용 하여 현재 페이지 의 하 이 라 이 트 를 실현 합 니 다.

최근 에 애플 릿 을 개발 하려 면 네 비게 이 션 을 해 야 합 니 다.네 비게 이 션 은 template 를 통 해 쓸 수 있 지만 이 프로젝트 는 네 비게 이 션 에서 논 리 를 처리 하여 구성 요 소 를 만 드 는 것 이 더욱 편리 합 니 다.

먼저 header 폴 더 를 새로 만 듭 니 다.그 안에 해당 하 는 js,json,wxml,wxss 파일 을 새로 만 듭 니 다.

<!--        -->
<view class='headers'>
   <navigator open-type="redirectTo" class='logo' url="../index/index" hover-class="none">
    <image src="../../assets/img/logo2.png" mode="widthFix"></image>
   </navigator>
  <view class="phone_nav_switch" bindtap="controlNav">
    <view class="iconfont icon-daohang" hidden="{{navIsShow}}"></view>
    <view class="iconfont icon-guanbi" hidden="{{!navIsShow}}"></view>
  </view>
  <view class="nav">
    <view class="shadow {{navIsShow ? 'active':''}}" bindtap="controlNav"></view>
    <view class="bg {{navIsShow ? 'active':''}}">
      <view class='con' wx:for="{{navs}}" wx:key="item.url">
         <navigator open-type="redirect" data-index="{{index}}" class="{{index === navActive ? 'active' : ''}}" url="{{item.url}}" hover-class="none">
          {{item.text}}
         </navigator>
      </view>
    </view>
  </view>
  <!--      -->
  <view class="backTop" bindtap="goTop" hidden='{{floorstatus}}'>
    <text class="icon iconfont icon-iconfonticontrianglecopy"></text>
  </view>

</view>

header.js 내 비게 이 션 데이터

 /**
  *        
  */
 properties: {
  //       
  navActive: {
   //   
   type: Number,
   //    
   value: 0
  }
 },

 data: { 
  //      
  navIsShow: false,
  currentIndexNav: 0,
  // floorstatus: false,
  navs: [
   {
    text: '    ',
    url: '../index/index'
   },
   {
    text: '    ',
    url: '../join/join'
   },
   {
    text: '    ',
    url: '../about/about'
   },
   {
    text: '    ',
    url: '../food/food'
   },
   {
    text: '    ',
    url: '../news/news'
   },
   {
    text: '    ',
    url: '../search/search'
   },
   {
    text: '    ',
    url: '../contact/contact'
   },
   {
    text: '    ',
    url: '../videoItem/videoItem'
   }

  ]
 },

탐색 은 class="nav"에 두 고 header.json 파일 에 기록 합 니 다.

{
 "component": true
}

index.json 같은 구성 요소 페이지 의 json 파일 을 불 러 와 야 합 니 다.

{
 "component": true,
 "usingComponents": {
  "header":"../header/header"
 }
}

그 다음 에 index.wxml 에서 구성 요 소 를 도입 합 니 다.navActive 는 구성 요소 에 전 달 된 값 입 니 다.네 비게 이 션 구성 요소 안의 네 비게 이 션 모든 index 에 대응 하기 위해 서 입 니 다.예 를 들 어 첫 페이지 의 index 는 0 입 니 다.그러면 제 가 첫 페이지 에서 정의 한 navActive 는 0 입 니 다.

 <!--      -->
  <view class='header'> 
    <!--        -->
     <header navActive='0'></header>
  </view>

현재 페이지 와 같 으 면 밝 아 집 니 다.

heaer.js 에 navActive 형식 을 설정 해 야 합 니 다.위의 조작 을 통 해 저 는 현재 페이지 내 비게 이 션 하 이 라 이 트 를 실현 할 수 있 습 니 다.
，
필요 한 사람 을 도 와 줬 으 면 좋 겠 어 요.제 가 잘 모 르 겠 어 요.제 github 입 니 다.
https://github.com/mazixiao/wechat_zhutian
이것 괜찮아요?
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.