위 챗 애플 릿 상단 스크롤 내 비게 이 션 효과

수 요 는 애플 릿 이 머리 를 내 비게 이 션 으로 분류 하 는 효과 이다.

상단 은 scroll-view 구성 요소 로 가로 스크롤 합 니 다.tab 옵션 카드 와 같은 효과,내용 은 템 플 릿 과 유사 한 방식 으로 참조 하여 중복 사용 할 수 있 습 니 다.

<scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%">
 <view wx:for="{{classify}}" wx:key="id" data-type="{{item.id}}" class="scroll-view-item_H {{curTab==item.id?'sv-item-on':'sv-item-off'}}" bindtap="classifyClick">
  {{item.name}}
 </view>
</scroll-view>
 <block wx:if="{{curTab ==0}}"> <include src="recommend.wxml"/> </block>
 <block wx:elif="{{curTab==1}}"> <include src="fuli.wxml"/> </block>
 <block wx:elif="{{curTab==2}}"> <include src="other.wxml"/> </block>
 <block wx:elif="{{curTab==3}}"> <include src="other.wxml"/> </block>
 <block wx:elif="{{curTab==4}}"> <include src="other.wxml"/> </block>
 <block wx:elif="{{curTab==5}}"> <include src="other.wxml"/> </block>
 <block wx:else> <include src="other.wxml"/> </block>

PS:애플 릿 이 상단 네 비게 이 션 바 를 동적 으로 설정 하 는 방법 을 살 펴 보 겠 습 니 다.
요약
이것 을 기록 한 이 유 는 작은 프로그램 프로젝트 를 할 때 사장 님 께 서 제 가 한 페이지 에서 index 를 해 야 하기 때 문 입 니 다.서로 다른 시간 대 에 상단 에서 탐색 하 는 색 채 는 배경 과 같 아야 하기 때 문 입 니 다.처음에 사장 님 이 요구 하지 않 기 전에 저 는 이렇게 하고 싶 었 습 니 다.그러나 바 이 두 방법 은 정확 하고 적당 한 것 을 찾 지 못 했 습 니 다.그래서 저 는 어 리 석 어서 몰래 고정된 색 을 사용 하 는 것 을 게 으 르 면 좋 겠 습 니 다.나중에 사장 님 이 프로젝트 성 과 를 보고'상단 의 색깔 이 배경 색 과 다 르 게 안 예 쁜 데 다른 시간 대의 배경 색 과 같 을 수 있 는 지'라 고 의견 을 제시 하 셨 을 줄 어떻게 알 았 겠 습 니까?에이~사장 님 은 제 아픔 을 모 르 고 사장 님 의 말 만 들 을 수 밖 에 없 었 습 니 다.그래서 저 는 API 를 열심히 보 았 습 니 다.드디어 보 았 습 니 다.
이 수요 가 제 다음 프로젝트 에 쓰 일 것 같 아서 여기 서 필 기 를 하고,
1.현재 페이지 의 제목 동적 설정  wx.setNavigationBarTitle(OBJECT)
object 매개 변수 설명:
1.속성:title-유형:String-필수:예-설명:페이지 제목
2.속성:success-유형:Function-필수:아니오-설명:인터페이스 호출 성공 리 셋 함수
3.속성:fail-유형:Function-필수:아니오-설명:인터페이스 호출 실패 한 리 셋 함수
4.속성:complete-유형:Function-필수:아니오-설명:인터페이스 호출 이 끝 난 리 셋 함수(호출 이 성공 하거나 실패 할 경우 실행)

wx.setNavigationBarTitle({
    title:"    "
})

2.상단 탐색 표시 줄 의 배경 색 wx.setNavigationBarColor(OBJECT)를 동적 으로 설정 합 니 다.
object 매개 변수 설명:
  속성-유형-필수-설명
1.fontColor-String-예-전경 색상 값,단추,제목,상태 표시 줄 색상 을 포함 하여\#fff 와\#000 만 지원 합 니 다.
2.backgroundColor-String-예-배경 색,유효 치 16 진수 색
3.animation-Object-아니오-애니메이션 효과
4.animation.duration-Number-아니오-애니메이션 변화 시간,기본 0,단위(밀리초)
5.animation.timingFunc-String-아니오-애니메이션 변경 방식,기본 linear
6.success-Function-아니오-인터페이스 호출 성공 적 인 리 셋 함수
7.fail-Function-아니오-인터페이스 호출 실패 한 리 셋 함수
8.complete-Function-아니오-인터페이스 호출 이 끝 난 리 셋 함수(성공,실패 모두 실행)

wx.setNavigationBarColor({
   frontColor:'#ffffff',
    backgroundColor:'#ff0000'
})

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 위 챗 애플 릿 상단 에서 네 비게 이 션 효 과 를 굴 릴 수 있 습 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!