這篇文章主要介紹“微信小程序swiper-dot中的點怎么改成滑塊”，在日常操作中，相信很多人在微信小程序swiper-dot中的點怎么改成滑塊問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序swiper-dot中的點怎么改成滑塊”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

站在用戶的角度思考問題，與客戶深入溝通，找到千陽網站設計與千陽網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：網站制作、成都網站制作、企業官網、英文網站、手機端網站、網站推廣、域名與空間、雅安服務器托管、企業郵箱。業務覆蓋千陽地區。

目標效果

整體來看很簡單。主要是下邊的滑塊需要花一些功夫。整理需求之后需要實現的功能點如下：

• 滑塊需要有一個自然的滑動效果。

• 滑塊需要跟著滑動方向滑動。

思路

經過整理，實現方案如下：

• 在滑動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" style="width: {{dotBarWidth}}rpx"></view>
</view>

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

這個滑塊的大小是基于滑道的長度，以及swiper-item的數量來計算的。這樣子得到寬度之后我們只要偏移滑塊寬度的倍數即可。

let dotWidth = 100;
let dotBarWidth = Math.round(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中的點怎么改成滑塊
標題路徑：http://www.yijiale78.com/article42/ihohec.html

成都網站建設公司_創新互聯，為您提供小程序開發、網站設計公司、品牌網站制作、App設計、、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯