위 챗 애플 릿 scroll-view 클릭 항목 자동 가운데 효과 구현
1448 단어 애플 릿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 자동 가운데 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
