本文實例講述了微信小程序實現滑動切換自定義頁碼的方法。分享給大家供大家參考，具體如下：

效果如下：

這里三個圖片使用了swiper組件進行輪播，下方的頁碼數字1、2、3會隨著圖片的切換變動位置

在微信小程序中我們是無法操作dom的，那么

var div = document.getElementById('id');div.setAttribute("class", "className");

這種方式實現。

然后我們可以考慮使用hidden或者wx:if的方式，將三個頁碼顯示的view進行輪流顯示/隱藏操作。但是不知道為什么這種方式只支持一次操作

最后，使用了display:none/block來達到影藏/顯示狀態的切換，這個display是寫在wxml文件中的

 <view class="bottomView" >  <view class="bottom1" style="display:{{bottomHidden1}}" >   <view class="pageCur">   <text class="textPageCur textFont">{{index+1}}-5</text>    //index是因為上方采用了<block wx:for="{{itemInfor}}" >顯示內容，index從0開始計數便是當前下標   </view>   <view class="buttomImg">   <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>   </view>  </view>  <view class="bottom2" style="display:{{bottomHidden2}}">   <view class="pageCur">   <text class="textPageCur textFont" > {{index+1}}-5</text>   </view>   <view class="buttomImg">    <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>   </view>  </view>  <view class="bottom3" style="display:{{bottomHidden3}}">   <view class="pageCur">   <text class="textPageCur textFont">{{index+1}}-5</text>   </view>   <view class="buttomImg">    <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>   </view>   </view>  </view>

以上這就是頁碼顯示部分，頁碼的組成包括一個text和一個image（下方白色橫線），這個內容嵌套在<swiper-item></swiper-item>中

bottomView采用position:fixed的定位方式固定在底部設置高和寬，bottom3、2、1采用position:absolute的方式。需要注意的是，如果在bottomView使用了display:flex，將無法使用position。所以在這一部分未采用flex。但是上面的文字和圖片部分采用的是display:flex實現的，這種方式比較簡單

在swiper中，綁定了bindchange="swiperChange"方法，用于在頁面切換時觸發下方頁碼的變化動作，在js文件中該方法如下：

Page({ data: { bottomHidden1:"block", bottomHidden2: "none" , bottomHidden3: "none" , }, swiperChange:function(event){ var currentView=event.detail.current;     //此處使用了swiper的bindchange事件帶過來的參數current，這個參數從0開始計數，內容為當前頁碼 var isHidden1 =""; var isHidden2 =""; var isHidden3 =""; switch (currentView) {  case 1:  isHidden1 = "none";  isHidden2 = "block";  isHidden3 = "none";  break;  case 2:  isHidden1 = "none";  isHidden2 = "none";  isHidden3 = "block" ;  break;  case 0:  isHidden1 = "block";  isHidden2 = "none";  isHidden3 = "none";;  break; } this.setData({  bottomHidden1:isHidden1,  bottomHidden2: isHidden2,  bottomHidden3: isHidden3 }); },