WeChat은 탭 효과를 달성하기 위해 js를 개발합니다.-PHP开发-php.cn

WeChat은 탭 효과를 달성하기 위해 js를 개발합니다.

高洛峰

풀어 주다： 2016-12-08 14:30:57

원래의

1585명이 탐색했습니다.

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

1. 먼저 탐색을 클릭할 때 두 개의 변수가 필요합니다. 하나는 현재 클릭 스타일 클래스를 저장하고 다른 하나는 다른 탐색을 위한 기본 스타일 클래스입니다. >

2. 탭 콘텐츠 목록도 두 개의 변수가 필요합니다. 하나는 현재 표시 블록을 저장하고 다른 하나는 다른 숨겨진 기본 블록을 저장합니다

3. 삼안 연산을 사용하여 클릭하여 탐색 색인을 얻습니다. , 그리고 인덱스를 기준으로 현재 클래스를 추가할지 여부를 판단합니다. [참고, 여기서는 클릭 이벤트를 상위 탐색 모음에 바인딩하고 대상 개체를 통해 클릭에 의해 트리거되는 이벤트 개체 속성을 가져옵니다.]

결합해 주세요 다음 렌더링:

WeChat은 탭 효과를 달성하기 위해 js를 개발합니다.

연결 아래로 내려와 소스 코드를 직접 확인하세요.

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;
}

로그인 후 복사