집 >위챗 애플릿 >미니 프로그램 개발 >탭 효과를 얻기 위해 WeChat에서 개발한 Node.js

탭 효과를 얻기 위해 WeChat에서 개발한 Node.js

不言원래의: 2018-06-22 17:43:472317검색

이 글은 주로 WeChat 개발의 학습 노트를 소개하며, js는 특정 참고 가치가 있는 탭 효과를 구현합니다. 관심 있는 친구들이 참고할 수 있습니다.

최근 WeChat 애플리케이션 계정이 본격화되어 인기가 높습니다. , 검색 키워드가 나타나는 것을 확인할 수 있으며, 다양한 웹 사이트에 나타나는 것은 WeChat의 공식 문서 설명입니다. 이 열풍을 따라잡기 위해 나는 지난 며칠간 미니 프로그램의 기술 문서를 꼼꼼히 읽은 후 직접 사례를 작성하기 시작했습니다. WeChat 내부에는 많은 구성 요소가 패키지되어 있으며 방금 탭 효과가 없다는 것을 발견하여 지난 이틀 동안 방금 연구했습니다. 아이디어는 다음과 같습니다:

1. 먼저 탐색을 클릭할 때 두 개의 변수가 필요합니다. 하나는 현재 클릭 스타일 클래스를 저장하는 것이고 다른 하나는 다른 탐색의 기본 스타일 클래스입니다. 탭 콘텐츠 목록에도 두 개의 변수가 필요합니다. 하나는 현재 클릭 스타일 클래스를 저장하는 것이고, 다른 하나는 숨겨진 기본 블록을 저장하는 것입니다

3. 인덱스 기반 클래스 [여기서는 클릭 이벤트를 상위 탐색 모음에 바인딩합니다. 대상 개체는 클릭에 의해 트리거되는 이벤트 개체 속성을 가져옵니다.]

다음 렌더링을 결합하세요.

다음으로 보기 소스 코드 직접:

demo.wxml:

<view class="tab"> 
 <view class="tab-left" bindtap="tabFun"> 
 <view class="{{tabArr.curHdIndex==&#39;0&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd01" data-id="0">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex==&#39;1&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd02" data-id="1">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex==&#39;2&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd03" data-id="2">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex==&#39;3&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd04" data-id="3">tab-hd01</view> 
 </view> 
 
 <view class="tab-right"> 
 <view class="right-item {{tabArr.curBdIndex==&#39;0&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd01</view> 
 <view class="right-item {{tabArr.curBdIndex==&#39;1&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd02</view> 
 <view class="right-item {{tabArr.curBdIndex==&#39;2&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd03</view> 
 <view class="right-item {{tabArr.curBdIndex==&#39;3&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd04</view> 
 </view> 
</view>

demo.js:

Page( { 
 data: { 
 tabArr: { 
 curHdIndex: 0, 
 curBdIndex: 0 
 }, 
 }, 
 tabFun: function(e){ 
 //获取触发事件组件的dataset属性 
 var _datasetId=e.target.dataset.id; 
 console.log("----"+_datasetId+"----"); 
 var _obj={}; 
 _obj.curHdIndex=_datasetId; 
 _obj.curBdIndex=_datasetId; 
 this.setData({ 
 tabArr: _obj 
 }); 
 }, 
 onLoad: function( options ) { 
 alert( "------" ); 
 } 
});

demo.wxss:

.tab{ 
 display: flex; 
 flex-direction: row; 
} 
.tab-left{ 
 width: 200rpx; 
 line-height: 160%; 
 border-right: solid 1px gray; 
} 
.tab-left view{ 
 border-bottom: solid 1px red; 
} 
.tab-left .active{ 
 color: #f00; 
} 
.tab-right{ 
 line-height: 160%; 
} 
.tab-right .right-item{ 
 padding-left: 15rpx; 
 display: none; 
} 
.tab-right .right-item.active{ 
 display: block; 
}

최종 시연 효과는 다음과 같습니다.

위 내용은 개인적인 계획일 뿐이고, 더 좋은 계획이 있으시면 제안하셔도 좋습니다~

위 내용은 글 전체 내용이므로, 더 많은 관련 내용을 학습하시는데 도움이 되었으면 합니다. 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!

탭 효과를 얻기 위해 WeChat에서 개발한 Node.js

관련 기사