草庐IT

微信小程序分类菜单激活状态跟随列表滚动自动切换

DCodes 2023-04-19 原文


这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现，组件用的是微信小程序的scroll-view
逻辑就是获取右侧盒子的节点信息，获取右侧子分类的节点信息，当子分类滑动到顶部的之后，则切换左侧分类状态，而且当右侧子分类的位置处于触顶以及包含顶部位置的状态下，同样激活左侧分类状态。

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只需要在左侧父级分类点击的时候更新即可。

跟随微信小程序spanclasstoken小程序vue.jsjavascript前端

有关微信小程序分类菜单激活状态跟随列表滚动自动切换的更多相关文章

  1. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h

  2. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  3. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  6. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  7. Ruby:如何将数组拼接成 Lisp 风格的列表？ - 2

    这是我发现自己偶尔想做的事情。假设我有一个参数列表。在Lisp中，我可以像这样`(imaginary-function,@args)为了调用将数组从一个元素转换为正确数量的参数的函数。Ruby中是否有类似的功能？或者我只是在这里使用了一个完全错误的成语？ 最佳答案 是的!它被称为splat运算符。a=[1,44]p(*a) 关于Ruby:如何将数组拼接成Lisp风格的列表？，我们在StackOverflow上找到一个类似的问题： https://stackov

  8. ruby-on-rails - Ruby on Rails 将列表拆分或切片为列 - 2

    @locations=Location.all#currentlistingall@locations=Location.slice(5)orLocation.split(5)使用Ruby，我试图将我的列表分成4列，每列限制为5个；然而，切片或拆分似乎都不起作用。知道我可能做错了什么吗？任何帮助是极大的赞赏。 最佳答案 您可能想使用in_groups_of:http://railscasts.com/episodes/28-in-groups-of这是RyanBates在railscast中的示例用法:

  9. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  10. Ruby 删除可枚举列表中的重复项 - 2

    ruby中有没有一个很好的方法来删除可枚举列表中的重复项(即拒绝等) 最佳答案 对于数组你可以使用uniq()方法a=["a","a","b","b","c"]a.uniq#=>["a","b","c"]所以如果你只是(1..10).to_a.uniq或%w{antbatcatant}.to_a.uniq因为无论如何，几乎所有您实现的方法都将作为Array类返回。 关于Ruby删除可枚举列表中的重复项，我们在StackOverflow上找到一个类似的问题： h

随机推荐