⽬录
背景
⽬标效果
思路
实现
swiper监听change
⾃定义dot模块
change事件中的逻辑
写在最后
本⽂主要介绍如何基于已有的组件（⽐如⼩程序的swiper，还有我们平时h5⽤的⽐较多的swiper.js等），实现⼀个滑块样式的指⽰⾯板。demo基于⼩程序，但是逻辑通⽤。
背景
最近要做⼀个新的⼩程序，在⾸页部分有⼀个swiper模块，因为设计同学的出⾊发挥 ，让我在枯燥的开发中得到了些许快乐。他们将swiper中指⽰⾯板中的点，改成了⼀个滑块，说实话，⽼⽼实实整成⼀排点它不⾹么，哈哈哈哈。但是我宠他~
⽬标效果
整体来看很简单。主要是下边的滑块需要花⼀些功夫。整理需求之后需要实现的功能点如下：
滑块需要有⼀个⾃然的滑动效果。
滑块需要跟着滑动⽅向滑动。
思路
经过整理，实现⽅案如下：
在滑动swiper的content的时候，我们可以获取当前页⾯的curPage（⼀般情况下组件都会提供当前页），接着我们可以在滑动结束之后设置上⼀个页⾯的prePage，这个prePage其实就是本次的curPage。通过这个page我们可以得到滑块滑动的起始位置以及结束位置。
滑动我们可以通过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" ></view>
</view>
这其中需要给我们的滑块⼀个初始化的⼤⼩，不然滑动之后会有⼀个宽度变换的抖动，也就是dotBarWidth。
这个滑块的⼤⼩是基于滑道的长度，以及swiper-item的数量来计算的。这样⼦得到宽度之后我们只要偏移滑块宽度的倍数即可。
let dotWidth = 100;
let dotBarWidth = und(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点改滑块内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
发布评论