【移動應(yīng)用開發(fā)技術(shù)】微信小程序swiper-dot中的點怎么改成滑塊

這篇文章主要介紹“微信小程序swiper-dot中的點怎么改成滑塊”，在日常操作中，相信很多人在微信小程序swiper-dot中的點怎么改成滑塊問題上存在疑惑，在下查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序swiper-dot中的點怎么改成滑塊”的疑惑有所幫助！接下來，請跟著在下一起來學(xué)習(xí)吧！整體來看很簡單。主要是下邊的滑塊需要花一些功夫。整理需求之后需要實現(xiàn)的功能點如下：滑塊需要有一個自然的滑動效果。滑塊需要跟著滑動方向滑動。經(jīng)過整理，實現(xiàn)方案如下：在滑動swiper的content的時候，我們可以獲取當(dāng)前頁面的curPage（一般情況下組件都會提供當(dāng)前頁），接著我們可以在滑動結(jié)束之后設(shè)置上一個頁面的prePage，這個prePage其實就是本次的curPage。通過這個page我們可以得到滑塊滑動的起始位置以及結(jié)束位置?；瑒游覀兛梢酝ㄟ^transform來實現(xiàn)。因為用了transform，所以我們需要小程序支持自定義style，但目前來看小程序提供了一套this.animate的方法。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">

這個是swiper{{index}}

</view>

</swiper-item>

</block>

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

class="dot">

<view

class="dot-bar"

style="width:

{{dotBarWidth}}rpx"></view>

</view>這其中需要給我們的滑塊一個初始化的大小，不然滑動之后會有一個寬度變換的抖動，也就是dotBarWidth。這個滑塊的大小是基于滑道的長度，以及swiper-item的數(shù)量來計算的。這樣子得到寬度之后我們只要偏移滑塊寬度的倍數(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,

tran