微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄
更新時(shí)間：2022年07月17日 08:45:02 作者：NamCat
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近在做的項(xiàng)目有這樣一個(gè)需求，也不太好描述，就是有兩個(gè)頂部菜單欄，每個(gè)二級(jí)菜單欄的item都有自己頁(yè)面，每個(gè)頁(yè)面都可以通過(guò)左右滑動(dòng)來(lái)切換，第一個(gè)想到的實(shí)現(xiàn)方法就是雙層swiper嵌套，但想要達(dá)到一個(gè)聯(lián)動(dòng)的效果還是有一點(diǎn)點(diǎn)復(fù)雜，去網(wǎng)上找了一圈也沒(méi)結(jié)果只好自己來(lái)搞一下了
先貼一下效果圖
1.先把第一層swiper框架搭好，需要能通過(guò)滑動(dòng)和點(diǎn)擊切換頁(yè)面，基本方法可百度
2.在第一層的<swiper-item>中嵌入第二層的<swiper>，方法照舊
3.基本功能能實(shí)現(xiàn)，問(wèn)題也來(lái)了，如何實(shí)現(xiàn)第二層的<swiper-item>滑到盡頭時(shí)第一層的<swiper>能隨之改變，基本實(shí)現(xiàn)思路是通過(guò)綁定swiper組件的回調(diào)方法bindtransition獲取swiper-item的位移數(shù)據(jù)，但是回調(diào)的數(shù)據(jù)并沒(méi)有swiper-item的下標(biāo)，所以無(wú)法判定當(dāng)前滑動(dòng)的swiper-item是否在邊緣，所以只能自己動(dòng)腦筋了，方法就是在邊緣的swiper-item容器內(nèi)加一個(gè)充滿(mǎn)容器的view，并且綁定touch的相關(guān)方法，在方法內(nèi)設(shè)置是否越級(jí)翻頁(yè)的flag為true，當(dāng)然這個(gè)flag在js中默認(rèn)定義為false，有了這個(gè)flag再加上bindtransition的回調(diào)偏移量就能夠?qū)崿F(xiàn)越級(jí)翻頁(yè)了
4.思路上是沒(méi)問(wèn)題的，但是寫(xiě)完會(huì)發(fā)現(xiàn)有許許多多小bug，一不小心就會(huì)崩潰的那種，最后經(jīng)過(guò)不斷的調(diào)整和測(cè)試，崩潰是不會(huì)了，滑動(dòng)也挺順暢的，下面貼完整代碼
wxml:
<view class="contain">
? <view class='tabbar'>
? ? <view class="tabbar_item {{swipeIndex==0 ? 'on' : ''}}" data-current='0' bindtap="swichNav">
? ? ? <view>item1</view>
? ? </view>
? ? <view class="tabbar_item {{swipeIndex==1 ? 'on' : ''}}" data-current='1' bindtap="swichNav">
? ? ? <view>item2</view>
? ? </view>
? ? <view class="tabbar_item {{swipeIndex==2 ? 'on' : ''}}" data-current='2' bindtap="swichNav">
? ? ? <view>item3</view>
? ? </view>
? ??
? </view>
? <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="overflow-y:hidden">
?
? ? <swiper-item>
? ? ? <view class="swiper1_top">
? ? ? ? <view class="swiper1_top_item {{itemIndex1==0 ? 'on' : ''}}" data-current1='0' bindtap="itemSwich1">child_item1.1</view>
? ? ? ? <view class="swiper1_top_item {{itemIndex1==1 ? 'on' : ''}}" data-current1='1' bindtap="itemSwich1">child_item1.2</view>
? ? ? </view>
? ? ? <swiper current="{{itemCurrent1}}" duration="300" bindchange="swiperItemChange1" bindtransition="swiperTrans">
? ? ? ? <swiper-item>
? ? ? ? ? child_item1.1的頁(yè)面
? ? ? ? </swiper-item>
? ? ? ? <swiper-item>
? ? ? ? ? <view style="width:100vw;height:100%" bindtouchmove="itemTouchRightMove" bindtouchend="itemTouchRightEnd" ?bindtouchcancel="itemTouchRightEnd">child_item1.2的頁(yè)面</view>
? ? ? ? </swiper-item>
? ? ? </swiper>
? ? </swiper-item>
?
?
? ? <swiper-item>
? ? ? <view class="swiper1_top">
? ? ? ? <view class="swiper1_top_item {{itemIndex2==0 ? 'on' : ''}}" data-current2='0' bindtap="itemSwich2">child_item2.1</view>
? ? ? ? <view class="swiper1_top_item {{itemIndex2==1 ? 'on' : ''}}" data-current2='1' bindtap="itemSwich2">child_item2.2</view>
? ? ? ? <view class="swiper1_top_item {{itemIndex2==2 ? 'on' : ''}}" data-current2='2' bindtap="itemSwich2">child_item2.3</view>
? ? ? </view>
? ? ? <swiper current="{{itemCurrent2}}" duration="300" bindchange="swiperItemChange2" bindtransition="swiperTrans">
? ? ? ? <swiper-item style="width:100vw;height:100%" bindtouchmove="itemTouchLeftMove" bindtouchend="itemTouchLeftEnd" bindtouchcancel="itemTouchLeftEnd">
? ? ? ? ? child_item2.1的頁(yè)面
? ? ? ? </swiper-item>
? ? ? ? <swiper-item>
? ? ? ? ? <view style="width:100vw;height:100%" >child_item2.2的頁(yè)面</view>
? ? ? ? </swiper-item>
? ? ? ? <swiper-item>
? ? ? ? ? <view style="width:100vw;height:100%" bindtouchmove="itemTouchRightMove" bindtouchend="itemTouchRightEnd" bindtouchcancel="itemTouchRightEnd">child_item2.3的頁(yè)面</view>
? ? ? ? </swiper-item>
? ? ? </swiper>
? ? </swiper-item>
?
?
? ? ?<swiper-item>
? ? ? <view class="swiper1_top">
? ? ? ? <view class="swiper1_top_item {{itemIndex3==0 ? 'on' : ''}}" data-current3='0' bindtap="itemSwich3">child_item3.1</view>
? ? ? ? <view class="swiper1_top_item {{itemIndex3==1 ? 'on' : ''}}" data-current3='1' bindtap="itemSwich3">child_item3.2</view>
? ? ? ? <view class="swiper1_top_item {{itemIndex3==2 ? 'on' : ''}}" data-current3='2' bindtap="itemSwich3">child_item3.3</view>
? ? ? </view>
? ? ? <swiper current="{{itemCurrent3}}" duration="300" bindchange="swiperItemChange3" bindtransition="swiperTrans">
? ? ? ? <swiper-item style="width:100vw;height:100%" bindtouchmove="itemTouchLeftMove" bindtouchend="itemTouchLeftEnd" bindtouchcancel="itemTouchLeftEnd">
? ? ? ? ? child_item3.1的頁(yè)面
? ? ? ? </swiper-item>
? ? ? ? <swiper-item>
? ? ? ? ? <view style="width:100vw;height:100%" >child_item3.2的頁(yè)面</view>
? ? ? ? </swiper-item>
? ? ? ? <swiper-item>
? ? ? ? ? <view style="width:100vw;height:100%" >child_item3.3的頁(yè)面</view>
? ? ? ? </swiper-item>
? ? ? </swiper>
? ? </swiper-item>
? </swiper>
</view>wxss:
page {
? font-size: 3.5vw;
? height: 100%;
? width: 100%;
? display: flex;
? flex-direction: column;
}
swiper{
? height: 100%;
? width: 100%;
}
?
.contain {
? display: flex;
? flex-direction: column;
? flex: 1;
? height: 0;
}
?
.tabbar {
? height: 5vw;
? width: 100vw;
? display: flex;
? flex-direction: row;
? justify-content: space-around;
? border-bottom: 3px #dbdbdb solid;
? padding-bottom: 2vw;
}
?
.tabbar_item {
? display: flex;
? flex: 1;
? flex-direction: column;
? align-items: center;
}
?
.on {
? color: coral;
}
?
?
.swiper-box {
? display: flex;
? flex-direction: column;
? flex: 1;
? height: 0;
? width: 100%;
? overflow-x: hidden;
? overflow-y: scroll;
}
?
.swiper1_top {
? width: 100vw;
? display: flex;
? margin-left: 2vw;
? flex-direction: row;
? font-size: 4vw;
? align-items: center;
? background-color: white;
}
?
.swiper1_top_item {
? flex: 1;
? display: flex;
? justify-content: center;
? align-items: center;
? padding: 2.5vw 0;
}
.swiper1_contain {
? width: 100vw;
? height: 100%;
? display: flex;
? flex-direction: column;
? align-items: center;
}
.swiper1_item {
? margin-bottom: 3vw;
? width: 94vw;
}
.dir_row {
? display: flex;
? flex-direction: row;
}js:
Page({
?
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? currentTab: 0,
? ? swipeIndex: 0,
? ? itemCurrent1: 0,
? ? itemIndex1: 0,
? ? itemCurrent2: 0,
? ? itemIndex2: 0,
? ? itemCurrent3: 0,
? ? itemIndex3: 0,
? ? flag1: false,
? ? flag2: false,
? ? flag3: true
? },
? /**?
? ?* 滑動(dòng)切換tab?
? ?*/
? bindChange: function(e) {
? ? console.log('debugbindcange')
? ? var that = this;
? ? that.setData({
? ? ? swipeIndex: e.detail.current
? ? });
?
? },
? swiperItemChange1: function(e) {
? ? var that = this;
? ? that.setData({
? ? ? itemIndex1: e.detail.current
? ? });
? },
? swiperItemChange2: function(e) {
? ? var that = this;
? ? that.setData({
? ? ? itemIndex2: e.detail.current
? ? });
? },
? swiperItemChange3: function(e) {
? ? var that = this;
? ? that.setData({
? ? ? itemIndex3: e.detail.current
? ? });
? },
? /**?
? ?* 點(diǎn)擊tab切換?
? ?*/
? swichNav: function(e) {
? ? var that = this;
? ? if (this.data.swipeIndex === e.currentTarget.dataset.current) {
? ? ? return false;
? ? } else {
? ? ? that.setData({
? ? ? ? currentTab: e.currentTarget.dataset.current
? ? ? })
? ? }
?
? },
? itemSwich1: function(e) {
? ? var that = this;
? ? if (this.data.itemIndex1 === e.currentTarget.dataset.current1) {
? ? ? return false;
? ? } else {
? ? ? that.setData({
? ? ? ? itemIndex1: e.currentTarget.dataset.current1,
? ? ? ? itemCurrent1: e.currentTarget.dataset.current1
? ? ? })
? ? }
? },
? itemSwich2: function(e) {
? ? var that = this;
? ? console.log(e)
? ? if (this.data.itemIndex2 === e.currentTarget.dataset.current2) {
? ? ? return false;
? ? } else {
? ? ? that.setData({
? ? ? ? itemIndex2: e.currentTarget.dataset.current2,
? ? ? ? itemCurrent2: e.currentTarget.dataset.current2
? ? ? })
? ? }
? },
? itemSwich3: function(e) {
? ? var that = this;
? ? if (this.data.itemIndex3 === e.currentTarget.dataset.current3) {
? ? ? return false;
? ? } else {
? ? ? that.setData({
? ? ? ? itemIndex3: e.currentTarget.dataset.current3,
? ? ? ? itemCurrent3: e.currentTarget.dataset.current3
? ? ? })
? ? }
? },
?
? /**
? ?* 滑動(dòng)item綁定事件
? ?*/
? swiperTrans: function(e) {
? ? var that = this;
? ? var dx = e.detail.dx
? ??
? ? if (this.data.flag3 && (this.data.flag2) && (dx >= 50) && (dx < 100)) {
? ? ? console.log('debug')
? ? ? that.data.flag3 = false
? ? ? this.setData({
? ? ? ? currentTab: that.data.swipeIndex + 1,
? ? ? ??
? ? ? })
? ? }
? ? if (this.data.flag3 && (this.data.flag1) && (dx <= -50) && (dx > -100)) {
? ? ? that.data.flag3 = false
? ? ? this.setData({
? ? ? ? currentTab: that.data.swipeIndex - 1,
? ? ? ??
? ? ? })
? ? }
? ??
? },
?
? itemTouchLeftMove: function(e) {
? ? this.data.flag1 = true;
? },
? itemTouchLeftEnd: function(e) {
? ? this.data.flag1 = false;
? ? this.data.flag3 = true;
? },
? itemTouchRightMove: function(e) {
? ? this.data.flag2 = true;
? },
? itemTouchRightEnd: function(e) {
? ? this.data.flag2 = false;
? ? this.data.flag3 = true;
? }
})json沒(méi)有
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用TypeScript實(shí)現(xiàn)楊輝三角的代碼示例
楊輝三角,又稱(chēng)帕斯卡三角,是一個(gè)數(shù)學(xué)上非常有趣和重要的概念,它是一種數(shù)學(xué)結(jié)構(gòu),它不僅可以用于組合數(shù)學(xué),還可以應(yīng)用于代數(shù)、概率和許多其他領(lǐng)域,在本文中,我們將通過(guò)使用?TypeScript?來(lái)編寫(xiě)楊輝三角的程序,同時(shí)深入探討?TypeScript?的類(lèi)型系統(tǒng)2023-09-09
你知道世界上有多少種瀏覽器嗎？除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器。2009-02-02
在javascript的函數(shù)中，除了聲明時(shí)定義的形參之外，每個(gè)函數(shù)還可以接收兩個(gè)附加的參數(shù)：this和arguments。這里就講一下this的作用以及不同場(chǎng)景下它的不同指向。2016-10-10
Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式
這篇文章主要介紹了Omi v1.0.2發(fā)布正式支持傳遞javascript表達(dá)式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
javascript計(jì)時(shí)器編寫(xiě)過(guò)程與實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了javascript計(jì)時(shí)器編寫(xiě)過(guò)程與實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過(guò)程解析
這篇文章主要介紹了基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
Listloading.js移動(dòng)端上拉下拉刷新組件
這篇文章主要介紹了Listloading.js移動(dòng)端上拉下拉刷新組件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
微信小程序?qū)崿F(xiàn)頂部固定 底部分頁(yè)滾動(dòng)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頂部固定底部分頁(yè)滾動(dòng)效果，本文大概給大家分享三種解決方案，每種方案給大家詳細(xì)剖析通過(guò)代碼解析哪種方案更適合，感興趣的朋友跟隨小編一起看看吧2022-10-10
BootStrap柵格系統(tǒng)可以把我們的container容器劃分為若干等分，如果想要每個(gè)部分之間留出一定的空隙，那么應(yīng)該怎么解決，本文就來(lái)介紹一下2021-08-08
js中判斷文本框是否為空的兩種方法，需要的朋友可以參考下。2011-07-07