위 챗 애플 릿 scroll-view 클릭 항목 자동 가운데 효과 구현

scroll-view|위 챗 오픈 문서
효과.

코드
레이아웃 스타일 코드 생략,논리 코드 만 보 여 줍 니 다.

<scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation class="scroll-view">
 <view class="class-item" wx:for="{{classList}}" wx:key="id" bindtap="switchClass">
  <text class="name">{{item.className}}</text>
 </view>
</scroll-view>
onReady(){
 wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect)=>{
  this.data.scrollViewWidth = Math.round(rect.width)
 }).exec()
},
switchClass(){
 let offsetLeft = e.currentTarget.offsetLeft
 this.setData({
  scrollLeft: offsetLeft - this.data.scrollViewWidth/2
 })
}

우리 가 원 하 는 것 은 가운데 효 과 를 원 하기 때문에 스크롤 을 촉발 하 는 조건 은 점scroll-view너비 의 절반 이후 의 항목 이 스크롤 을 시작 하기 때문에 너비 의 절반 을 줄 여야 합 니 다.
4.567914.전체 길이 의 X 축 거리 에 비해 상쇄 계산 후의 수치 가 양수 이면 위의 조건 을 증명 하고 스크롤 을 촉발 할 수 있다.
추천
총결산
위 챗 애플 릿 scroll-view 클릭 항목 의 자동 가운데 효과 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 애플 릿 scroll-view 자동 가운데 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 지원 바 랍 니 다!