扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现双层嵌套菜单栏
  • 150

0
分享到

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

2024-04-02 19:04:59 150人浏览 独家记忆
摘要

最近在做的项目有这样一个需求，也不太好描述，就是有两个顶部菜单栏，每个二级菜单栏的item都有自己页面，每个页面都可以通过左右滑动来切换，第一个想到的实现方法就是双层swiper嵌套

最近在做的项目有这样一个需求，也不太好描述，就是有两个顶部菜单栏，每个二级菜单栏的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
  },
  
  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
    });
  },
  
  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
      })
    }
  },
 
  
  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没有

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

--结束END--

本文标题: 微信小程序实现双层嵌套菜单栏

本文链接: https://lsjlt.com/news/164407.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序实现双层嵌套菜单栏
    最近在做的项目有这样一个需求，也不太好描述，就是有两个顶部菜单栏，每个二级菜单栏的item都有自己页面，每个页面都可以通过左右滑动来切换，第一个想到的实现方法就是双层swiper嵌套...
    99+
    2024-04-02
  • 微信小程序如何实现双层嵌套菜单栏
    这篇文章主要介绍“微信小程序如何实现双层嵌套菜单栏”，在日常操作中，相信很多人在微信小程序如何实现双层嵌套菜单栏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序如何实现双层嵌套菜单栏”的疑惑有所帮助！...
    99+
    2023-07-02
  • 微信小程序自定义tab实现多层tab嵌套
    本文实例为大家分享了微信小程序自定义tab实现多层tab嵌套的具体代码，供大家参考，具体内容如下 仅供参考，刚学，不对的地方希望交流学习 HTML： <template>...
    99+
    2024-04-02
  • 微信小程序实现多层级复选框菜单
    目录一、背景二 、效果展示三、功能点四、代码实现五 、最后本文实例为大家分享了微信小程序自定义多层级复选框菜单的具体代码，供大家参考，具体内容如下 一、背景 因客户需要，有一个功能是...
    99+
    2024-04-02
  • 微信小程序怎么自定义tab实现多层tab嵌套
    这篇“微信小程序怎么自定义tab实现多层tab嵌套”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么自定义tab实...
    99+
    2023-07-02
  • 微信小程序实现联动菜单
    最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。 第1步：了解一下 左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于...
    99+
    2024-04-02
  • 微信小程序实现收缩式菜单
    本文实例为大家分享了微信小程序实现收缩式菜单的具体代码，供大家参考，具体内容如下 wxml文件 <view class="page"> <!--分类 -->...
    99+
    2024-04-02
  • 微信小程序实现循环嵌套数据选择
    本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码，供大家参考，具体内容如下 一、效果展示 二、代码实现 在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的...
    99+
    2024-04-02
  • 微信小程序实现字母索引菜单
    本文实例为大家分享了微信小程序实现字母索引菜单的具体代码，供大家参考，具体内容如下 wxml文件 <view class="container"> <view c...
    99+
    2024-04-02
  • 微信小程序如何实现循环及嵌套循环
    这篇文章主要为大家展示了“微信小程序如何实现循环及嵌套循环”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序如何实现循环及嵌套循环”这篇文章吧。微信小程序...
    99+
    2024-04-02
  • 微信小程序如何实现自定义菜单切换栏tabbar组
    这篇文章将为大家详细讲解有关微信小程序如何实现自定义菜单切换栏tabbar组，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图：wxml代...
    99+
    2024-04-02
  • 微信小程序实现点餐小程序左侧滑动菜单
    目录前言一、初识scroll-view二、左侧导航三、右侧滑动前言 最近在帮亲戚做一款微信的点餐小程序，以前从没有接触过小程序的我只能现做现卖。一边看文档一边实践尝试，在进行到点菜模...
    99+
    2024-04-02
  • Android使用ExpandableListView实现三层嵌套折叠菜单
    前段时间项目的新功能里有些页面需要三层嵌套列表实现，虽然在移动端这种很丑，但是需求就是需求。 本来想用各种View嵌套，然后发现系统有个ExpandableListView。就直接...
    99+
    2024-04-02
  • 微信小程序如何实现收缩式菜单
    这篇“微信小程序如何实现收缩式菜单”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序如何实现收缩式菜单”文章吧。wxm...
    99+
    2023-07-02
  • 微信小程序如何实现字母索引菜单
    本篇内容介绍了“微信小程序如何实现字母索引菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！wxml文件<view clas...
    99+
    2023-07-02
  • 微信小程序实现菜单左右联动效果
    本文实例为大家分享了微信小程序实现菜单左右联动效果的具体代码，供大家参考，具体内容如下 原理 首先是获取数据，并且获取数据的长度（需要根据长度来计算元素的高度），通过遍历数据的内容通...
    99+
    2024-04-02
  • 实现微信小程序中的下拉菜单效果
    实现微信小程序中的下拉菜单效果，需要具体代码示例随着移动互联网的普及，微信小程序成为了互联网开发的重要一环，越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷，但也需要掌握一定的开发技巧。在微信小程序的开...
    99+
    2023-11-21
    下拉菜单 微信小程序 实现
  • 使用微信小程序实现滑动菜单效果
    使用微信小程序实现滑动菜单效果微信小程序作为一种快速开发并具有广泛应用的工具，为我们提供了多种实现滑动菜单效果的方法。本文将向您展示一种简单而实用的实现方式，帮助您在开发中轻松添加滑动菜单效果。准备工作在开始编码之前，我们需要先创建一个基本...
    99+
    2023-11-21
    微信小程序 实现 滑动菜单
  • 微信小程序如何实现点餐小程序左侧滑动菜单
    这篇文章主要讲解了“微信小程序如何实现点餐小程序左侧滑动菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序如何实现点餐小程序左侧滑动菜单”吧！效果图：一、初识scroll-view...
    99+
    2023-07-02
  • 微信小程序里面怎么嵌套html页面
    使用web-view标签实现在小程序中嵌入html网页如：<web-view src="https://www.baidu.com"></web-view>使用微信小程序正式号时,需要将...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作