위 챗 애플 릿 swiper-dot 의 점 을 슬라이더 로 어떻게 바 꿉 니까?

본 고 는 기 존의 구성 요소(예 를 들 어 위 챗 애플 릿 의 swiper,그리고 우리 가 평소에 h5 를 많이 사용 하 는 swiper.js 등)를 바탕 으로 슬라이더 스타일 의 지시 패 널 을 실현 하 는 방법 을 소개 한다.demo 는 애플 릿 을 기반 으로 하지만 논리 적 으로 통용 된다.
배경
최근 에 새로운 애플 릿 을 만 들 려 고 합 니 다.첫 페이지 부분 에 swiper 모듈 이 있 습 니 다.디자인 학생 들 의 뛰어난 활약 때 문 입 니 다.😭，나 로 하여 금 무미건조 한 개발 에서 약간의 즐거움 을 얻 게 했다.그들 은 swiper 에서 지시 판 에 있 는 점 을 슬라이더 로 바 꾸 었 습 니 다.솔직히 말 해서 한 줄 로 만 들 면 향 이 좋 지 않 습 니까?하하 하.근 데 제 가 예 뻐 해 드릴 게 요.
목표 효과
전체적으로 보면 간단 하 다.주로 아래 의 슬라이더 는 약간의 시간 이 필요 하 다.수 요 를 정리 한 후에 실현 해 야 할 기능 점 은 다음 과 같다.
4.567917.슬라이더 는 자 연 스 러 운 미끄럼 효과 가 있어 야 한다4.567917.슬라이더 는 미끄럼 방향 에 따라 미끄러져 야 한다
사고의 방향
정 리 를 통 해 실현 방안 은 다음 과 같다.
4.567917.swiper 콘 텐 츠 를 미 끄 러 뜨 릴 때 현재 페이지 의 curPage(일반적인 상황 에서 구성 요 소 는 현재 페이지 를 제공 합 니 다)를 가 져 올 수 있 습 니 다.이 어 미끄럼 이 끝 난 후에 이전 페이지 의 prePage 를 설정 할 수 있 습 니 다.이 prePage 는 바로 이번 curPage 입 니 다.이 페이지 를 통 해 우 리 는 슬라이더 가 미 끄 러 지 는 시작 위치 와 끝 위 치 를 얻 을 수 있 습 니 다4.567917.미끄럼 우 리 는 transform 을 통 해 이 루어 질 수 있다

transform 을 사 용 했 기 때문에 사용자 정의 style 을 지원 하 는 애플 릿 이 필요 합 니 다.그러나 현재 애플 릿 은 this.animate 방법 을 제공 하고 있 습 니 다

이루어지다
swiper 감청 change
우선 swiper 의 change 이 벤트 를 사용 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

<swiper
 class="hot-content-swiper"
 indicator-dots="{{indicatorDots}}"
 vertical="{{vertical}}"
 bindchange="sliderHandler">
 <block wx:for="{{popular_zone_list}}" wx:key="*this">
   <swiper-item>
     <view class="hot-list">
          swiper{{index}}
     </view>
   </swiper-item>
 </block>
</swiper>

사용자 정의 dot 모듈
그 다음 에 우 리 는 dot 의 DOM,즉 우리 의 슬라이더 구역 을 스스로 정 해 야 한다.코드 는 다음 과 같다.

<view class="dot">
 <view class="dot-bar" style="width: {{dotBarWidth}}rpx"></view>
</view>

그 중에서 우리 슬라이더 에 초기 화 된 크기 를 주어 야 합 니 다.그렇지 않 으 면 미 끄 러 진 후에 너비 가 바 뀌 는 떨 림 이 있 습 니 다.즉,dotBarWidth 입 니 다.
이 슬라이더 의 크기 는 슬라이더 의 길이 와 swiper-item 의 수량 에 따라 계산 된다.이렇게 폭 을 얻 은 후에 우 리 는 슬라이더 너비 의 배수 만 옮 기 면 된다.

let dotWidth = 100;
let dotBarWidth = Math.round(dotWidth/popular_zone_list.length);

change 이벤트 의 논리
템 플 릿 이 이미 다 썼 습 니 다.그러면 우 리 는 change 의 사건 을 쓰기 시 작 했 습 니 다.코드 는 다음 과 같 습 니 다.

sliderHandler({detail}) {
 let curPage = detail.current;
 let self = this;
 this.animate('.dot-bar', [
   {
     translateX: self.prePage * 100 + '%',
     transformOrigin: 'center',
   },
   {
     translateX: curPage*100 + '%',
     transformOrigin: 'center',
   },
 ], 100, function () { //animate   
   self.prePage = curPage;
   self.clearAnimation('.container', {
     translateX: true,
     transformOrigin: true
   });
 });
},
//        ，  this.animate        style，     DOM    。

이 기능 은 이미 실현 되 었 는데,이 기능 이 여전히 매우 간단 하고 괜찮다 는 것 을 발견 한 것 입 니까?😒。
마지막 에 쓰다
솔직히 실현 하 는 과정 에서 저 는 지적 장애 가 있 었 습 니 다.그 당시 의 상태 와 관련 이 있 었 죠?슬라이더 가 왼쪽 이 냐 오른쪽 이 냐 를 어떻게 판단 하 는 지 에 너무 관심 이 많아 서 길 을 돌 았 습 니 다.그러나 결 과 를 고려 해 보면 우 리 는 시작 과 끝 위 치 를 계산 하면 된다.왼쪽 미끄럼 은 반드시 시작 위치 가 끝 위치 보다 크다 는 것 을 알 수 있다.이상 의 방안 을 참고 해 주 셨 으 면 좋 겠 습 니 다.🎉
위 챗 애플 릿 swiper-dot 의 점 을 슬라이더 로 바 꾸 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 swiper-dot 점 에서 슬라이더 를 바 꾸 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 저 를 많이 응원 해 주세요!