This article mainly introduces how to implement a slider style indicator panel based on existing components (such as Swiper of wechat small program, and swiper.js that we usually use in H5, etc.). Demo is based on applets, but the logic is universal.

background

Recently, I want to make a new small program, and there is a swiper module in the home page. Thanks to the excellent performance of the design students 😭, I have gained some happiness in the boring development. They changed the points in the swiper indicator panel into a slider, and honestly, it doesn’t feel good to have them in a row. But I spoil him

Effect of target

The overall picture is simple. The main thing is that the slider on the bottom takes some work. Function points to be implemented after collating requirements are as follows:

  • The slider needs to have a natural sliding effect.
  • The slider needs to follow the direction of the slide.

Train of thought

After sorting out, the implementation scheme is as follows:

  • Swiper swiper swiper swiper swiper swiper swiper swiper swiper swiper swipercurPage(Normally the component will provide the current page), and then we can set the previous page’s after the slide endsprePage, the prePage is actually the curPage of this time. From this page we can get the starting and ending positions of the slider.
  • Slide and we can get throughtransformTo implement.
  • Because in thetransform, so we need the applet to support custom styles, but for now the applet provides a setthis.animateMethods.

implementation

Swiper to monitor change

First we need to use the change event of swiper as follows:

<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">This is swiper {{index}}</view>
   </swiper-item>
 </block>
</swiper>
Copy the code

Custom DOT module

Second, we need the DOM of the custom dot, which is our slider area, as follows:

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

We need to give our slider an initial size, otherwise we will have a jitter after sliding, namely dotBarWidth. The size of the slider is calculated based on the length of the slide and the number of swiper-items. So once we get the width we just offset it by a multiple of the width of the slider.

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

Logic in the change event

Now that the template has been written, we can write the change event as follows:

sliderHandler({detail}) {
 let curPage = detail.current;
 let self = this;
 this.animate('.dot-bar'[{translateX: self.prePage * 100 + The '%'.transformOrigin: 'center'}, {translateX: curPage*100 + The '%'.transformOrigin: 'center'],},100.function () { / / the animate the callback
   self.prePage = curPage;
   self.clearAnimation('.container', {
     translateX: true.transformOrigin: true
   });
 });
},
// If it is not a small program, then this.animate can be changed into a dynamically bound style, or some other DOM operation.
Copy the code

To this function has been realized, is not found this function is very simple quite good 😒.

Write in the last

To be honest, IN the process of implementation, I had some mentally retarded behaviors, which were related to the state at that time. Somehow, I was too focused on how to determine whether the slider was sliding left or right, which led to a detour. But in fact, based on the results, we only need to calculate the start and end positions, and the left slide must be greater than the start position. Hope the above scheme can give you some reference ~🎉🎉🎉