微信小程序分类菜单激活状态跟随列表滚动自动切换
这里主要用到微信小程序提供的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
只需要在左侧父级分类点击的时候更新即可。
微信小程序分类菜单激活状态跟随列表滚动自动切换的更多相关文章
- 微信小程序里使用 Redux 状态管理
微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...
- 微信小程序 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
微信小程序 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 友情提示: 大家 ...
- 微信小程序分类的实现
微信小程序的分类功能思路 实现思路 1.把屏幕当成一个固定的盒子,然后把盒子分成两边,并让盒子的每一边都能够滚动. 2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配,渲染展示相同i ...
- 微信小程序-自定义菜单导航(实现楼梯效果)
设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...
- 微信小程序API~检查登录状态
wx.checkSession(Object object) 检查登录态是否过期. 通过 wx.login 接口获得的用户登录态拥有一定的时效性.用户越久未使用小程序,用户登录态越有可能失效.反之如果 ...
- 【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
问题图: 问题原因: <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist} ...
- 微信小程序开发实战(1):使用滚动视图
本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动.滚动事件等,并通过例子代码来演示这些功能的使用方法. 1. 垂直滚动视图 scroll-view是容器组件 ...
- 微信小程序—获取用户网络状态和设备的信息
这个是一个简易教程,按照他的步骤下载好了,打开界面看到的效果是如下的:
- 微信小程序——自定义菜单切换栏tabbar组件
效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx ...
- 微信小程序-----校园头条详细开发之列表展示数据
1.分类列表数据展示功能的实现 1.1 结构 1.2 代码实现 1.2.1 列表显示数据,.每次界面显示6条数据,发请求获取数据,动态存放 var app = getApp() Page({ dat ...
随机推荐
- 链接脚本(Linker Scripts)语法和规则解析(自官方手册)
为了便于与英文原文对照学习与理解(部分翻译可能不准确),本文中的每个子章节标题和引用使用的都是官方手册英文原称.命令及命令行选项统一使用斜体书写.高频小节会用蓝色字体标出. 3 Linker Scri ...
- K8S kubesphere安装mysql
原先我们使用Docker按照mysql时候的命令 docker run -p 3306:3306 --name mysql-01 \ -v /mydata/mysql/log:/var/log/mys ...
- java集合类 collection接口,List集合
java集合类:collection接口,List集合 在java.util包中提供了一些集合类,集合类又被称为容器,常用的有List集合,Set集合,Map集合.下面将介绍collection接口和 ...
- 关于 risrqnis
这道题里最有用的( Range Insert Subset Range Query [n?] In Set 破案了 我那五个点是因为维护不知道有什么用的东西炸了 删了就过了 题面 [JRKSJ R4] ...
- k8s篇-k8s集群架构及组件详解【史上最详细】
O kubernetes简介 k8s是什么 k8s是一个可移植的.可扩展的开源平台,用于管理容器化的工作负载和服务,可以促进声明式配置和自动化. k8s能做什么 1)服务发现和负载均衡 Kuberne ...
- day33-JSON&Ajax01
JSON&Ajax01 JSON 在线文档 AJAX 在线文档 1.JSON介绍 JSON指的是JavaScript对象表示法( JavaScript Object Notation),JSO ...
- aiohttp、asyncio使用协程增加爬虫效率
import aiohttp import asyncio import time async def get_requests(url): async with aiohttp.ClientSess ...
- Ubuntu20.04 Java相关环境(JDK、Mysql、Redis、nacos、influxdb)部署以及运行
重装了系统,系统版本号为:Ubuntu20.04 1.云平台 登录云平台,选择要重装的服务器,关机.一键重装即可 2.安装jdk 下载jdk-8u341-linux-x64.tar.gz,并复制到服务 ...
- 使用 System.Text.Json 时,如何处理 Dictionary 中 Key 为自定义类型的问题
在使用 System.Text.Json 进行 JSON 序列化和反序列化操作时,我们会遇到一个问题:如何处理字典中的 Key 为自定义类型的问题. 背景说明 例如,我们有如下代码: // 定义一 ...
- Django之ORM表高级操作、增删改查、外键字段连表查、单表查、跨表查、F/Q查询
目录 一.如何开启自己的测试脚本? 二.对表数据的添加.更新.删除 1.create() 变态操作之批量插入数据 2.update() 3.delete() 4.如何查看QuerySet对象执行的sq ...