脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序双层嵌套菜单栏

微信小程序实现双层嵌套菜单栏

 更新时间：2022年07月17日 08:45:02   作者：NamCat  
这篇文章主要为大家详细介绍了微信小程序实现双层嵌套菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近在做的项目有这样一个需求，也不太好描述，就是有两个顶部菜单栏，每个二级菜单栏的item都有自己页面，每个页面都可以通过左右滑动来切换，第一个想到的实现方法就是双层swiper嵌套，但想要达到一个联动的效果还是有一点点复杂，去网上找了一圈也没结果只好自己来搞一下了

先贴一下效果图

1.先把第一层swiper框架搭好，需要能通过滑动和点击切换页面，基本方法可百度

2.在第一层的<swiper-item>中嵌入第二层的<swiper>，方法照旧

3.基本功能能实现，问题也来了，如何实现第二层的<swiper-item>滑到尽头时第一层的<swiper>能随之改变，基本实现思路是通过绑定swiper组件的回调方法bindtransition获取swiper-item的位移数据，但是回调的数据并没有swiper-item的下标，所以无法判定当前滑动的swiper-item是否在边缘，所以只能自己动脑筋了，方法就是在边缘的swiper-item容器内加一个充满容器的view，并且绑定touch的相关方法，在方法内设置是否越级翻页的flag为true，当然这个flag在js中默认定义为false，有了这个flag再加上bindtransition的回调偏移量就能够实现越级翻页了

4.思路上是没问题的，但是写完会发现有许许多多小bug，一不小心就会崩溃的那种，最后经过不断的调整和测试，崩溃是不会了，滑动也挺顺畅的，下面贴完整代码

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的页面
        </swiper-item>
        <swiper-item>
          <view style="width:100vw;height:100%" bindtouchmove="itemTouchRightMove" bindtouchend="itemTouchRightEnd"  bindtouchcancel="itemTouchRightEnd">child_item1.2的页面</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的页面
        </swiper-item>
        <swiper-item>
          <view style="width:100vw;height:100%" >child_item2.2的页面</view>
        </swiper-item>
        <swiper-item>
          <view style="width:100vw;height:100%" bindtouchmove="itemTouchRightMove" bindtouchend="itemTouchRightEnd" bindtouchcancel="itemTouchRightEnd">child_item2.3的页面</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的页面
        </swiper-item>
        <swiper-item>
          <view style="width:100vw;height:100%" >child_item3.2的页面</view>
        </swiper-item>
        <swiper-item>
          <view style="width:100vw;height:100%" >child_item3.3的页面</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({
 
  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0,
    swipeIndex: 0,
    itemCurrent1: 0,
    itemIndex1: 0,
    itemCurrent2: 0,
    itemIndex2: 0,
    itemCurrent3: 0,
    itemIndex3: 0,
    flag1: false,
    flag2: false,
    flag3: true
  },
  /** 
   * 滑动切换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
    });
  },
  /** 
   * 点击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
      })
    }
  },
 
  /**
   * 滑动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没有

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用TypeScript实现杨辉三角的代码示例

    使用TypeScript实现杨辉三角的代码示例

    杨辉三角,又称帕斯卡三角,是一个数学上非常有趣和重要的概念,它是一种数学结构,它不仅可以用于组合数学,还可以应用于代数、概率和许多其他领域,在本文中,我们将通过使用 TypeScript 来编写杨辉三角的程序,同时深入探讨 TypeScript 的类型系统
    2023-09-09
  • JavaScript 判断浏览器类型及版本

    JavaScript 判断浏览器类型及版本

    你知道世界上有多少种浏览器吗？除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器。
    2009-02-02
  • 详细讲解JavaScript中的this绑定

    详细讲解JavaScript中的this绑定

    在javascript的函数中，除了声明时定义的形参之外，每个函数还可以接收两个附加的参数：this和arguments。这里就讲一下this的作用以及不同场景下它的不同指向。
    2016-10-10
  • Omi v1.0.2发布正式支持传递javascript表达式

    Omi v1.0.2发布正式支持传递javascript表达式

    这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • javascript计时器编写过程与实现方法

    javascript计时器编写过程与实现方法

    这篇文章主要为大家详细介绍了javascript计时器编写过程与实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 基于js实现复制内容到操作系统粘贴板过程解析

    基于js实现复制内容到操作系统粘贴板过程解析

    这篇文章主要介绍了基于js实现复制内容到操作系统粘贴板过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Listloading.js移动端上拉下拉刷新组件

    Listloading.js移动端上拉下拉刷新组件

    这篇文章主要介绍了Listloading.js移动端上拉下拉刷新组件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • 微信小程序实现顶部固定 底部分页滚动效果

    微信小程序实现顶部固定 底部分页滚动效果

    这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果，本文大概给大家分享三种解决方案，每种方案给大家详细剖析通过代码解析哪种方案更适合，感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • BootStrap栅格之间留空隙的解决方法

    BootStrap栅格之间留空隙的解决方法

    BootStrap栅格系统可以把我们的container容器划分为若干等分，如果想要每个部分之间留出一定的空隙，那么应该怎么解决，本文就来介绍一下
    2021-08-08
  • js中判断文本框是否为空的两种方法

    js中判断文本框是否为空的两种方法

    js中判断文本框是否为空的两种方法，需要的朋友可以参考下。
    2011-07-07

最新评论