위 챗 애플 릿 이 지정 한 위치 로 스크롤 하려 면 누 르 십시오.

회사 프로젝트 는 위 챗 주소록 내 비게 이 션 과 유사 한 효 과 를 내 고 오른쪽 알파벳 페이지 를 클릭 하여 해당 위치 로 스크롤 해 야 한다.

위 챗 애플 릿 은 dom 개념 이 없 기 때문에 닻 점 을 사용 할 수 없고 해당 자모 가 상대 적 으로 페이지 의 오프셋 위 치 를 직접 가 져 올 수 없습니다.이 때 애플 릿 에서 대상 인 스 턴 스 를 만 드 는 API 로 노드 정 보 를 가 져 올 수 있 습 니 다.

let query = wx.createSelectorQuery().in(this);
query.selectViewport().scrollOffset()
query.select("#Nav").boundingClientRect();
query.select("#FilterNav").boundingClientRect();
query.select("#"+((letter=='#')?'other':letter)).boundingClientRect();
query.exec(function (res) {
  let scrollTop = 0;
  if(res[3]){
   scrollTop = res[0].scrollTop + res[3].top
  }else{
   scrollTop = res[0].scrollTop;
  }
  wx.pageScrollTo({
    scrollTop: scrollTop - res[1].height - res[2].height,
    duration: 300
  });
});

이 코드 의 뜻 을 설명해 주세요.
1.노드 대상 을 먼저 만 들 고 wx.createSelectorQuery()는 대상 의 인 스 턴 스 를 되 돌려 줍 니 다.
2.표시 영역 선택 하기;
3.selection 방법 을 호출 하여 노드 에 들 어 오 는 id 값 은 같은 노드 대상 에서 여러 번 호출 할 수 있 습 니 다.마지막 으로 배열 결 과 를 되 돌려 줍 니 다(위의 그림 에서 스크롤 영역 은 페이지 상단 에 두 개의 네 비게 이 션 표시 줄 높이 의 거리 가 있 기 때문에 두 번 의 네 비게 이 션 표시 줄 을 조회 하 였 습 니 다).
4.exec()리 셋 방법 에서 조회 한 모든 노드 의 정 보 를 얻 을 수 있 습 니 다.배열 의 첫 번 째 는 페이지 의 위치 정보(스크롤 거리)이 고 알파벳 노드 에 대응 하 는 top 값 은 노드 가 화면 상단 에 있 는 위치 입 니 다.
결과:페이지 스크롤 위치=페이지 스크롤 거리+알파벳 노드 상대 화면 높이 거리-머리 네 비게 이 션 바 높이-메뉴 표시 줄 높이
wx.pageSrollTo()호출 API 페이지 스크롤
스크롤 용 기 를 지정 한 위치 로 굴 리 면 계산 위치 가 조금 다 를 수 있 습 니 다.

var query = wx.createSelectorQuery().in(this);
query.select("#swiper").boundingClientRect();
query.select("#"+ letter).fields({ rect:true,scrollOffset:true });
query.selectViewport().scrollOffset()
query.exec((res)=>{
 _this.setData({
   letterScrolltop: res[1].top - res[0].top
 })
});  

위의 그림 은 팝 업 상자 의 내용 이기 때문에 목록 은 scroll-view 스크롤 용기 에 놓 여 있 습 니 다.위 와 다른 것 은 스크롤 위 치 는 스크롤 용기 거리 페이지 상단 거리-닻 점 거리 페이지 상단 거리 입 니 다.계 산 된 오프셋 을 scroll-view 용기 에 대응 하 는 scroll-top 속성 으로 수정 하면 됩 니 다.
위 챗 애플 릿 이 지 정 된 위치 로 굴 러 가 는 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 애플 릿 이 지 정 된 위치 로 굴 러 가 는 내용 을 클릭 하여 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!