이 글은 주로 WeChat 개발의 학습 노트를 소개하며, js는 특정 참고 가치가 있는 탭 효과를 구현합니다. 관심 있는 친구들이 참고할 수 있습니다.
최근 WeChat 애플리케이션 계정이 본격화되어 인기가 높습니다. , 검색 키워드가 나타나는 것을 확인할 수 있으며, 다양한 웹 사이트에 나타나는 것은 WeChat의 공식 문서 설명입니다. 이 열풍을 따라잡기 위해 나는 지난 며칠간 미니 프로그램의 기술 문서를 꼼꼼히 읽은 후 직접 사례를 작성하기 시작했습니다. WeChat 내부에는 많은 구성 요소가 패키지되어 있으며 방금 탭 효과가 없다는 것을 발견하여 지난 이틀 동안 방금 연구했습니다. 아이디어는 다음과 같습니다:
1. 먼저 탐색을 클릭할 때 두 개의 변수가 필요합니다. 하나는 현재 클릭 스타일 클래스를 저장하는 것이고 다른 하나는 다른 탐색의 기본 스타일 클래스입니다. 탭 콘텐츠 목록에도 두 개의 변수가 필요합니다. 하나는 현재 클릭 스타일 클래스를 저장하는 것이고, 다른 하나는 숨겨진 기본 블록을 저장하는 것입니다
3. 인덱스 기반 클래스 [여기서는 클릭 이벤트를 상위 탐색 모음에 바인딩합니다. 대상 개체는 클릭에 의해 트리거되는 이벤트 개체 속성을 가져옵니다.]
다음 렌더링을 결합하세요.
다음으로 보기 소스 코드 직접:
demo.wxml:
<view class="tab"> <view class="tab-left" bindtap="tabFun"> <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> </view> <view class="tab-right"> <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">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 애플릿 개발용 애니메이션 루프 애니메이션WeChat 애플릿에서 데이터 수정 후 페이지가 렌더링되지 않는 문제가 발생하는 문제를 해결하는 방법WeChat 애플릿 체크박스를 사용하여 다중 선택 상자 기능 표시 [소스 코드 포함]위 내용은 탭 효과를 얻기 위해 WeChat에서 개발한 Node.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!