위 챗 애플 릿 페이지 가 아래로 굴 러 갈 때 tab 표시 줄 고정 페이지 상단 인 스 턴 스 설명

먼저 효과 도 를 살 펴 보 자.

index.wxml


 <view class='{{tabIsTop ? "fixedTop" : ""}}'>
 <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange">
 <i-tab key="tab1" title="   "></i-tab>
 <i-tab key="tab2" title="    "></i-tab>
 <i-tab key="tab3" title="    "></i-tab>
 <i-tab key="tab4" title="   "></i-tab>
 </i-tabs>
 </view>

특별 설명:여기 사용 되 는 tab 탭 은 iviewi 의 프레임 워 크,주소:https://weapp.iviewui.com/components/tabs
index.wxss


.fixedTop {
 width: 100%;
 position: fixed;
 top: 0;
 z-index: 99;
}

index.js


Page({
 /**
 *        
 */
 data: {
 tabcurrent: 'tab1',
 tabIsTop:false,
 scrollTop: 0,
 },
 /**
 *       --      
 */
 onLoad: function (options) {
 
 },
 ontabChange(event) {
 this.setData({ active: event.detail });
 },
 //             
 onPageScroll: function (ev) {
 var _this = this;
 //    top       ，                              ，        ，         
 if (ev.scrollTop <= 0) {
  //       
  ev.scrollTop = 0;
  this.setData({ tabIsTop: false });
 } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) {
  //       
  ev.scrollTop = wx.getSystemInfoSync().windowHeight;
 }
 //            
 if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
  //    
  this.setData({ tabIsTop: true });
 } else {
  //    
 }
 // scrollTop    
 setTimeout(function () {
  _this.setData({
  scrollTop: ev.scrollTop
  })
 }, 0)
 },
})

위 챗 애플 릿 페이지 가 아래로 굴 러 갈 때 tab 표시 줄 고정 페이지 상단 인 스 턴 스 설명 에 관 한 이 글 은 여기까지 입 니 다.더 많은 위 챗 애플 릿 페이지 가 아래로 굴 러 갈 때 tab 표시 줄 고정 페이지 상단 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

OpenSSL 생 성 ssl 인증서

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

위 챗 애플 릿 페이지 가 아래로 굴 러 갈 때 tab 표시 줄 고정 페이지 상단 인 스 턴 스 설명

좋은 웹페이지 즐겨찾기