快捷導(dǎo)航

微信小程序swiper-dot中的點(diǎn)如何改成滑塊詳解

更新時(shí)間：2021年07月02日 09:36:08 作者：Winder

swiper組件是滑塊視圖容器,這篇文章主要給大家介紹了關(guān)于微信小程序swiper-dot中的點(diǎn)如何改成滑塊的相關(guān)資料,實(shí)現(xiàn)以后的效果還是不錯(cuò)的,需要的朋友可以參考下

背景

最近要做一個(gè)新的小程序，在首頁(yè)部分有一個(gè)swiper模塊，因?yàn)樵O(shè)計(jì)同學(xué)的出色發(fā)揮😭，讓我在枯燥的開發(fā)中得到了些許快樂(lè)。他們將swiper中指示面板中的點(diǎn)，改成了一個(gè)滑塊，說(shuō)實(shí)話，老老實(shí)實(shí)整成一排點(diǎn)它不香么，哈哈哈哈。但是我寵他~

目標(biāo)效果

整體來(lái)看很簡(jiǎn)單。主要是下邊的滑塊需要花一些功夫。整理需求之后需要實(shí)現(xiàn)的功能點(diǎn)如下：

滑塊需要有一個(gè)自然的滑動(dòng)效果。
滑塊需要跟著滑動(dòng)方向滑動(dòng)。

思路

經(jīng)過(guò)整理，實(shí)現(xiàn)方案如下：

在滑動(dòng)swiper的content的時(shí)候，我們可以獲取當(dāng)前頁(yè)面的curPage（一般情況下組件都會(huì)提供當(dāng)前頁(yè)），接著我們可以在滑動(dòng)結(jié)束之后設(shè)置上一個(gè)頁(yè)面的prePage，這個(gè)prePage其實(shí)就是本次的curPage。通過(guò)這個(gè)page我們可以得到滑塊滑動(dòng)的起始位置以及結(jié)束位置。
滑動(dòng)我們可以通過(guò)transform來(lái)實(shí)現(xiàn)。
因?yàn)橛昧藅ransform，所以我們需要小程序支持自定義style，但目前來(lái)看小程序提供了一套this.animate的方法。

實(shí)現(xiàn)

swiper監(jiān)聽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">
       這個(gè)是swiper{{index}}
     </view>
   </swiper-item>
 </block>
</swiper>

自定義dot模塊

其次，我們需要自定dot的DOM，也就是我們的滑塊區(qū)域，代碼如下：

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

這其中需要給我們的滑塊一個(gè)初始化的大小，不然滑動(dòng)之后會(huì)有一個(gè)寬度變換的抖動(dòng)，也就是dotBarWidth。

這個(gè)滑塊的大小是基于滑道的長(zhǎng)度，以及swiper-item的數(shù)量來(lái)計(jì)算的。這樣子得到寬度之后我們只要偏移滑塊寬度的倍數(shù)即可。

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

change事件中的邏輯

模板已經(jīng)寫完了，那我們就開始寫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的回調(diào)
   self.prePage = curPage;
   self.clearAnimation('.container', {
     translateX: true,
     transformOrigin: true
   });
 });
},
// 如果不是小程序，那么this.animate這個(gè)換成動(dòng)態(tài)綁定style，或者其他的DOM操作即可。

到此功能已經(jīng)實(shí)現(xiàn)了，是不是發(fā)現(xiàn)這個(gè)功能還是很簡(jiǎn)單的挺不錯(cuò)的😒。

寫在最后

說(shuō)實(shí)話，在實(shí)現(xiàn)的過(guò)程中，我有一些比較智障的行為，和當(dāng)時(shí)的狀態(tài)有關(guān)吧，不知怎么就過(guò)于關(guān)注在如何判斷滑塊是左滑還是右滑，導(dǎo)致繞了個(gè)路。但是其實(shí)基于結(jié)果去考慮發(fā)現(xiàn)，我們只要計(jì)算起始和結(jié)束位置即可，左滑必定是開始位置大于結(jié)束位置的。希望以上方案能給大家一些參考吧~🎉

到此這篇關(guān)于微信小程序swiper-dot中的點(diǎn)如何改成滑塊的文章就介紹到這了,更多相關(guān)微信小程序swiper-dot點(diǎn)改滑塊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: