您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在微信小程序中實現(xiàn)滑動切換自定義頁碼,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
在微信小程序中我們是無法操作dom的,那么
var div = document.getElementById('id'); div.setAttribute("class", "className");
這種方式實現(xiàn)。
然后我們可以考慮使用hidden或者wx:if
的方式,將三個頁碼顯示的view進(jìn)行輪流顯示/隱藏操作。但是不知道為什么這種方式只支持一次操作
最后,使用了display:none
/block
來達(dá)到影藏/顯示狀態(tài)的切換,這個display是寫在wxml文件中的
<view class="bottomView" > <view class="bottom1" > <view class="pageCur"> <text class="textPageCur textFont">{{index+1}}-5</text> //index是因為上方采用了<block wx:for="{{itemInfor}}" >顯示內(nèi)容,index從0開始計數(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" > <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" > <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(下方白色橫線),這個內(nèi)容嵌套在<swiper-item></swiper-item>
中
bottomView采用position:fixed
的定位方式固定在底部設(shè)置高和寬,bottom3、2、1采用position:absolute
的方式。需要注意的是,如果在bottomView使用了display:flex
,將無法使用position。所以在這一部分未采用flex。但是上面的文字和圖片部分采用的是display:flex
實現(xiàn)的,這種方式比較簡單
在swiper中,綁定了bindchange="swiperChange"
方法,用于在頁面切換時觸發(fā)下方頁碼的變化動作,在js文件中該方法如下:
Page({ data: { bottomHidden1:"block", bottomHidden2: "none" , bottomHidden3: "none" , }, swiperChange:function(event){ var currentView=event.detail.current; //此處使用了swiper的bindchange事件帶過來的參數(shù)current,這個參數(shù)從0開始計數(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 }); },
上述就是小編為大家分享的怎么在微信小程序中實現(xiàn)滑動切換自定義頁碼了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。