微信小程序?qū)崿F(xiàn)滑動(dòng)切換自定義頁(yè)碼的方法分析
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)滑動(dòng)切換自定義頁(yè)碼的方法。分享給大家供大家參考,具體如下:
效果如下:
這里三個(gè)圖片使用了swiper組件進(jìn)行輪播,下方的頁(yè)碼數(shù)字1、2、3會(huì)隨著圖片的切換變動(dòng)位置
在微信小程序中我們是無法操作dom的,那么
var div = document.getElementById('id'); div.setAttribute("class", "className");
這種方式實(shí)現(xiàn)。
然后我們可以考慮使用hidden或者wx:if
的方式,將三個(gè)頁(yè)碼顯示的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>
以上這就是頁(yè)碼顯示部分,頁(yè)碼的組成包括一個(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)的,這種方式比較簡(jiǎn)單
在swiper中,綁定了bindchange="swiperChange"
方法,用于在頁(yè)面切換時(shí)觸發(fā)下方頁(yè)碼的變化動(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)前頁(yè)碼 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ā)有所幫助。
相關(guān)文章
js隱式轉(zhuǎn)換的知識(shí)實(shí)例講解
在本篇文章中,小編給大家分享了關(guān)于js隱式轉(zhuǎn)換的相關(guān)知識(shí)點(diǎn)內(nèi)容,有興趣的朋友們參考學(xué)習(xí)下。2018-09-09微信小程序如何修改本地緩存key中單個(gè)數(shù)據(jù)的詳解
這篇文章主要介紹了微信小程序如何修改本地緩存key中單個(gè)數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04省市選擇的簡(jiǎn)單實(shí)現(xiàn)(基于zepto.js)
下面小編就為大家?guī)硪黄∈羞x擇的簡(jiǎn)單實(shí)現(xiàn)(基于zepto.js)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨想過來看看吧2016-06-06JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì)詳解【類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等】
這篇文章主要介紹了JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì),結(jié)合具體實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法
這篇文章主要介紹了以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法,文中首先對(duì)WordPress基本的PHP導(dǎo)航菜單的做法給出了說明來作為基礎(chǔ),需要的朋友可以參考下2015-12-12微信小程序外賣選購(gòu)頁(yè)實(shí)現(xiàn)切換分類與數(shù)量加減功能案例
這篇文章主要介紹了微信小程序外賣選購(gòu)頁(yè)實(shí)現(xiàn)切換分類與數(shù)量加減功能,結(jié)合具體實(shí)例形式分析了微信小程序狀態(tài)記錄、判定及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01