快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)滑動(dòng)切換自定義頁碼的方法分析

更新時(shí)間：2018年12月29日 14:13:21 作者：yytoo2

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)切換自定義頁碼的方法,結(jié)合實(shí)例形式分析了微信小程序頁碼動(dòng)態(tài)切換相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)滑動(dòng)切換自定義頁碼的方法。分享給大家供大家參考，具體如下：

效果如下：

這里三個(gè)圖片使用了swiper組件進(jìn)行輪播，下方的頁碼數(shù)字1、2、3會(huì)隨著圖片的切換變動(dòng)位置

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

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

這種方式實(shí)現(xiàn)。

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

最后，使用了display:none/block來達(dá)到影藏/顯示狀態(tài)的切換，這個(gè)display是寫在wxml文件中的

 <view class="bottomView" >
  <view class="bottom1" style="display:{{bottomHidden1}}" >
   <view class="pageCur">
   <text class="textPageCur textFont">{{index+1}}-5</text>    //index是因?yàn)樯戏讲捎昧?lt;block wx:for="{{itemInfor}}" >顯示內(nèi)容，index從0開始計(jì)數(shù)便是當(dāng)前下標(biāo)
   </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>

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

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

在swiper中，綁定了bindchange="swiperChange"方法，用于在頁面切換時(shí)觸發(fā)下方頁碼的變化動(dòng)作，在js文件中該方法如下：

Page({
 data: {
 bottomHidden1:"block",
 bottomHidden2: "none" ,
 bottomHidden3: "none" ,
 },
 swiperChange:function(event){
 var currentView=event.detail.current;     //此處使用了swiper的bindchange事件帶過來的參數(shù)current，這個(gè)參數(shù)從0開始計(jì)數(shù)，內(nèi)容為當(dāng)前頁碼
 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
 });
 },

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章: