How to change the dot in the WeChat applet swiper-dot into a slider

This article mainly introduces how to implement a slider-style indicator panel based on existing components (such as the swiper of WeChat applet and swiper.js, which we usually use in h5). The demo is based on a mini-program, but the logic is universal.

background

I am working on a new mini program recently. There is a swiper module on the home page. Thanks to the excellent work of my design classmates 😭, I have found some joy in the boring development. They changed the dots in the indicator panel of the swiper into a slider. To be honest, wouldn’t it be nice to just put them in a row and click them? Hahahaha. But I love him~

Target Effect

It's simple overall. Mainly the slider at the bottom needs some work. After sorting out the requirements, the functional points that need to be implemented are as follows:

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

Ideas

After sorting, the implementation plan is as follows:

• When sliding the content of swiper, we can get the curPage of the current page (generally, the component will provide the current page), and then we can set the prePage of the previous page after the sliding is completed. This prePage is actually the curPage of this time. Through this page we can get the starting position and ending position of the slider.
• Sliding can be achieved through transform.
• Because transform is used, we need the applet to support custom style, but currently the applet provides a set of this.animate methods.

accomplish

swiper listens to changes

First we need to use the swiper's change event. The code is 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>

Custom dot module

Secondly, we need to customize the DOM of dot, which is our slider area. The code is as follows:

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

This requires giving our slider an initial size, otherwise there will be a jitter in the width change after sliding, which is dotBarWidth.

The size of the slider is calculated based on the length of the slide and the number of swiper-items. After getting the width this way, we just need to offset it by a multiple of the slider width.

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

Logic in the change event

The template has been written, so let's start writing the change event. The code is as follows:

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 callback self.prePage = curPage;
   self.clearAnimation('.container', {
     translateX: true,
     transformOrigin: true
   });
 });
},
// If it is not a mini program, then this.animate can be replaced with a dynamically bound style, or other DOM operations.

Now that this function has been implemented, don’t you find that this function is very simple and pretty good? 😒

Final Thoughts

To be honest, during the implementation process, I did some stupid things, which might have been related to my state at the time. I was too focused on how to judge whether the slider was slid left or right, which led to a detour. But based on the results, we found that we only need to calculate the starting and ending positions, and the starting position of the left swipe must be greater than the ending position. I hope the above scheme can give you some reference~🎉

This is the end of this article about how to change the dot in the WeChat mini program swiper-dot into a slider. For more relevant content about how to change the dot in the WeChat mini program swiper-dot into a slider, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!