微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

2024-09-27 17:51:22

view结构

左侧父级分类

   <scroll-view
   class="left"
   scroll-y
   >
     <view
     class="{{item.id == active ? 'left_current left_box' : 'left_box'}}"
     wx:for="{{leftData}}"
     wx:key="index"
     bindtap="leftClick"
     data-id="{{item.id}}"
     >{{item.catName}}</view>
   </scroll-view>

右侧子分类

   <scroll-view
   class="right"
   scroll-y
   scroll-into-view="{{'chunk'+ activeClassifyId}}"
   scroll-with-animation
   bindscroll="scroll"
   >
     <view
     class="right_box"
     wx:for="{{rightData}}"
     wx:key="index"
     id="{{'chunk'+ item.id}}"
     >
        <view class="right_title">{{item.name}}</view>
        <view class="right_innerBox" wx:for-item="item2" wx:for="{{item.list}}" wx:key="index2" >
        <view>{{item2.name}}</view>
        </view>
     </view>
   </scroll-view>

css的部分大家自己按照需求写即可。

js部分

data:{
   // ...数据...
   active:'', // 左侧分类激活
   activeClassifyId :''  // 滚动定位的id
}
  // 左侧分类点击
  leftClick(e){
    // 当前分类id
    let { id } = e.currentTarget.dataset
    this.setData({
      active:id,  // 左侧激活的id
      activeClassifyId : id   // 分类定位的id
    })
    // activeClassifyId分类定位的id不应该和左侧激活的id是同一个，否则左侧激活会在下面的滚动事件内持续触发，导致无法滚动。
  },
  // 右侧滚动触发
  scroll(){
    let { rightData } = this.data
    rightData.map(item=>{
      if(item.list.length>0){
    // 返回一个 SelectorQuery 对象实例。获取页面的节点信息。
     const query = wx.createSelectorQuery()
      query.select('#chunk'+item.id)  // 获取id为chunkID的元素
      .boundingClientRect(ref=>{  // 获取节点宽高信息和位置信息
        // 如果当前的子分类滚动到了顶部以及当前子分类正处于顶部的位置
        if(0>ref.top&&ref.top>(ref.height*-1)){
          this.setData({active :item.id})   // 切换左侧父分类的高亮
        }
      }).exec()
      }
    })
  },

属性解释

scroll-with-animation：在设置滚动条位置时使用动画过渡

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

bindscroll：滚动时触发的事件event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

createSelectorQuery：返回一个 SelectorQuery 对象实例。获取页面的节点信息。

select：获取id的元素

boundingClientRect：获取节点宽高信息和位置信息

说明

此处用到的是scroll-into-view根据子分类的id动态定位到右侧子分类位置，右侧子分类在滚动的时候，会判断条件，如果当前子分类展示的这一栏触顶或者处于正在展示的位置（包含顶部），更新父级分类。

注意

左侧分类的高亮active不能和滚动定位的activeClassifyId共用，否则右侧滚动的时候会持续更新active导致右侧无法滚动，activeClassifyId只需要在左侧父级分类点击的时候更新即可。

到此这篇关于微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解的文章就介绍到这了,更多相关小程序菜单激活状态内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序实现收缩式菜单

本文实例为大家分享了微信小程序实现收缩式菜单的具体代码,供大家参考,具体内容如下 wxml文件 <view class="page">  <view class="li" data-index="0" bindtap='changeToggle'> <view class="left">谷类及制品</view> <view class=&qu
微信小程序实现双层嵌套菜单栏

最近在做的项目有这样一个需求,也不太好描述,就是有两个顶部菜单栏,每个二级菜单栏的item都有自己页面,每个页面都可以通过左右滑动来切换,第一个想到的实现方法就是双层swiper嵌套,但想要达到一个联动的效果还是有一点点复杂,去网上找了一圈也没结果只好自己来搞一下了先贴一下效果图 1.先把第一层swiper框架搭好,需要能通过滑动和点击切换页面,基本方法可百度 2.在第一层的<swiper-item>中嵌入第二层的<swiper>,方法照旧 3.基本功能能实现,问题也来了,如何实
小程序自定义索引菜单

本文实例为大家分享了小程序自定义索引菜单的具体代码,供大家参考,具体内容如下 <view class="indexes_chunk" wx:for="{{brandIndexList.brandGroupList}}" wx:key="item"> <view class="letter ancehor-{{item.indexLetter}}">{{item.indexLetter}}<
小程序实现下拉列表框菜单

本文实例为大家分享了小程序实现下拉列表框菜单的具体代码,供大家参考,具体内容如下 <view class='top'> <view class='top-text'> 选择班别</view>  <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image sr
微信小程序实现字母索引菜单

本文实例为大家分享了微信小程序实现字母索引菜单的具体代码,供大家参考,具体内容如下 wxml文件 <view class="container"> <view class="content"> <view class="all-food"> <view class="food">全部食物</view> <scroll-view class
微信小程序实现点餐小程序左侧滑动菜单

目录前言一.初识scroll-view 二.左侧导航三.右侧滑动前言最近在帮亲戚做一款微信的点餐小程序,以前从没有接触过小程序的我只能现做现卖.一边看文档一边实践尝试,在进行到点菜模块左侧滑动菜单时遇到了小小的阻碍.索性在查找一些资料和教程后主要功能实现了出来.特此记录下,也希望能帮助到需要做同样功能的同学. 效果图: 一.初识scroll-view 想要实现上述功能我们必须要借助微信为我们提供的scroll-view组件,没有了解过的同学需要先去简单阅读下API.从图中我们可以看出整
微信小程序实现菜单左右联动效果

本文实例为大家分享了微信小程序实现菜单左右联动效果的具体代码,供大家参考,具体内容如下原理首先是获取数据,并且获取数据的长度(需要根据长度来计算元素的高度),通过遍历数据的内容通过题目和元素个数的相加得到高度,当消失高度小于等于某个元素的高度就设定索引值给左边的菜单目录实现右边滑动左边联动,左边的菜单点击事件联动比较简单就不说代码实现 wxml <view class="menu"> <view class="left-box"
微信小程序实现多层级复选框菜单

目录一.背景二 .效果展示三.功能点四.代码实现五 .最后本文实例为大家分享了微信小程序自定义多层级复选框菜单的具体代码,供大家参考,具体内容如下一.背景因客户需要,有一个功能是需要注册用户时选择多个[单元 - 楼层 - 设备]的绑定,谷歌了一通,没有找到想要的,无奈之举只能手写一个… 二 .效果展示三.功能点 1.初始化时,默认展开选中的菜单2.点击每一层父级菜单,会自动折叠其子菜单3.选中子级节点会默认选中父级节点4.子级节点都没选中默认取消选中父级节点5.选中父级节点默认
微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

目录 view结构 js部分属性解释说明注意这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view 逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的之后,则切换左侧分类状态,而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下,同样激活左侧分类状态. view结构左侧父级分类 <scroll-view class="left" scroll-y > <view
微信小程序下拉菜单的实现

微信小程序下拉菜单看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto
微信小程序下拉菜单简单实例

微信小程序下拉菜单简单实例 wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol
微信小程序实现美团菜单

本文实例为大家分享了微信小程序实现美团菜单的具体代码,供大家参考,具体内容如下 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第一行菜品所在分类对应. 我的实现方式:(每个菜品高度*该分类菜品数量)+菜品分类高度 = x, 每次滚动的时候判断当前scrollTop是否在x范围内?左侧选中该分类:左侧不做改变: 问题:我设置菜品高度的单位是rpx,而scrollTop的单位是px,这也就是说,上面我计算的x是个变量, 所以当改变测试机型,这个功
微信小程序下拉菜单效果的实例代码

//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
微信小程序登录数据解密及状态维持实例详解

本文实例讲述了微信小程序登录数据解密及状态维持.分享给大家供大家参考,具体如下: 学习过小程序的朋友应该知道,在小程序中是不支持cookie的,借助小程序中的缓存我们也可以存储一些信息,但是对于一些比较重要的信息,我们需要通过登录状态维持来保存,同时,为了安全起见,用户的敏感信息,也是需要加密在网络上传输的. 前台,service.封装了http请求,同时封装了getSession(通过code获取服务器生成的session).getUserInfo(获取用户信息).getDecryptionD
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图从左边的列表页调到右边的详情页二.页面之间的跳转首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di
基于python 微信小程序之获取已存在模板消息列表

前言: 为了获取一定高级操作,如:微信模板消息(xiao,xin)推送,把消息推送给用户,或者是获取用户授权信息都需要用到access token,有效期为两个小时? 过了两个小时怎么办?重新获取,来,代码撸起走,啥女朋友没有? 获取小程序对应的access token def get_wx_token(): url = "https://api.weixin.qq.com/cgi-bin/token?" try: respone = requests.get(url, params=

微信小程序实现分类菜单激活状态随列表滚动而自动切换效果详解

目录

view结构

js部分

属性解释

说明

注意

相关推荐

随机推荐