级联滑动，better_scroll

已于 2022-03-13 16:23:07 修改
阅读量161 收藏
点赞数
分类专栏： VUE项目 文章标签： 前端
于 2022-03-13 15:50:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36582776/article/details/123460491
版权

1..使用better_scroll，使得一二级列表都能单独滑动。在库里找到对应绑定scroll监听，实时获取滚动距离y.

2.在渲染完毕后，收集右侧所有li的距离最顶部位置。

3.根据scroll和距离顶部距离计算当前分类下标，让一级列表对应栏目高亮

 需要监听滑动结束位置，将监听scroll改为监听scrollEnd。只在滑动结束后修改一级列表高亮效果即可。

4.点击一级分类，右侧的二级分类进行滑动显示

 

七彩冰淇淋与藕汤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两个table的水平滚动条 级联滚动(同步滚动)
wangzhazha0000的博客
09-22 1268
做动态报表时，报表表头和内容是分开绘制的，如需加水平的滚动条，那么必须保证两个table同步
cas.rar_MATLAB 级联失效_级联_级联失效 代码_级联失效代码_级联失效算法
07-14
"级联_级联失效 代码"则表明这个压缩包包含了级联失效的程序代码，这些代码可能是由MATLAB编写，用于仿真和分析网络中的级联失效现象。 "级联失效代码"是实际的程序源码，可能包括了各种算法，如故障传播模型、网络...
商品详情页的级联滚动
Boo_crob的博客
08-13 1195
实现效果： 点击tab中的选项，页面上下滚动到指定位置 页面滚动的指定位置，tab也选中指定的选项 解决思路： 先给指定的位置，各添加一个唯一id，（方便后续使用 uni.createSelectorQuery().select(’#’+that.idname).boundingClientRect(function(res) 定位到我要的id位置），并在data添加一个idname变量 比如说我的样式代码 //这里是我的tabs切换选项卡 current双向绑定当前所在下标 ， tabChan
移动端上下滚动版级联选择器原生js实现 超详细
最新发布
2301_78320134的博客
06-27 156
vue2的移动端 上下滚动版级联选择器 原生js实现 里面html css rem像素配置 都有 初学者小白可以看看 ，好处：粘走直接用
有关better-scroll的左右联动问题（层及关联）
Lovelyclown的博客
05-15 459
1：better-scroll //npm install better-scroll --save import BetterScroll from 'better-scroll' //一般在vue组件里面进行数据监视 this.$nextTick(()=>{ 代码块}) initScroll () { this.leftScroll = new BetterScroll('this.$refs.refName',{ click:true }) this.rightScroll = n
better-scroll 监听当前滚动距离
sxl131415的博客
07-06 2190
better-scroll设置滑动距离如果超出可视宽口会继续滑动
zhaohanqq的博客
05-23 1392
在项目中，有很多tab，用better-scroll使滑动更流畅 产品要求每次被点击选中的tab都要趋向中间展示，不用better-scroll时即使设置了scrollleft=-100，滚动轴也只在0处就停止了，但是better-scroll后，你设置多少就能滚动多少，第一个tab真滚到中间去了，前面都是空白，这不是我们想要的效果。 解决办法是根据情况判断滚动的距离 //初始化better-sc...
Hqiaoqidianping.rar_H桥 逆变器_H桥级联逆变器_级联 逆变器_级联H桥_级联H桥逆变
07-14
《H桥逆变器及其级联技术的MATLAB/Simulink仿真研究》 H桥逆变器是一种广泛应用的电力电子变换设备，尤其在交流驱动、电源系统以及电机控制等领域中占据重要地位。H桥逆变器因其电路结构酷似字母“H”而得名，由四...
级联H桥光伏并网逆变器研制_付裕.zip_多电平逆变器_级联H 桥_级联H桥_级联光伏逆变_级联多电平
07-15
模块化多电平逆变，可以多个模块同时工作，可以随意切入切出模块
H_CLS.rar_H桥级联spwm_Multilevel bridge_级联H桥_级联多电平_载波层叠SPWM
07-13
《H桥级联多电平逆变器与载波层叠SPWM调制技术详解》 在电力电子领域，H桥级联多电平逆变器是一种广泛应用的电源转换技术，其核心在于通过级联多个H桥结构实现电压等级的提升，从而提供更宽的电压输出范围和更高的...
statcom.rar_statcom 级联_同步补偿statcom_级联多电平_级联补偿器_静止同步补偿
07-14
级联多电平静止同步补偿器，采用载波移相法产生触发脉冲，触发IGBT。
BetterScroll：可能是目前最好用的移动端滚动插件
weixin_34381666的博客
09-12 483
作者：滴滴webapp架构组-付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。 由于它基于原...
better-scroll实现菜单和列表滚动效果联动。
SilenceJude的博客
09-04 4172
上一篇中，我们使用better-scroll实现了列表滚动效果，但是并没有与菜单栏关联起来，这里我们就实现左右联动功能。 解决思路：右侧滚动的时候，可以通过获取右侧列表栏实时的Y轴坐标，然后判断Y轴坐标落在某一个区间，记录下该区间的数组下标，判断左侧高亮的数组索引下标，绑定一个动态类赋予给标的菜单数组索引即可。...
两table水平滚动条级联滚动(同步滚动)。 table1放标题，table2放内容。
weixin_33697898的博客
08-04 2182
 //table1=head和table2=body水平滚动条级联滚动 $(document).ready(function () { $("#bodyPanel").scroll(function () { var scrollLeft=$("#bodyPanel").scrollLeft(); var margin_left=Number(-5)-Numbe...
better-scroll的使用
weixin_46500485的博客
11-18 1816
1.首先在页面中要有一个固定高度的容器 注：.wrapper就是这个容器 且这个容器只能有一个子容器 <div class="wrapper" ref="wrapper"> <ul class="moviebox"> <li v-for="(ele,index) in movieList" :key="index" class="movieContainer">
vue使用better-scroll监听滑动事件
热门推荐
Smile_ping的博客
03-27 1万+
vue使用better-scroll监听滑动效果 ps: 实现某元素吸顶 或 滑动到某个元素时固定显示 ，反之隐藏（根据需求） 使用： better-scroll插件 写的不好，不足之处，欢迎大家指导， 谢谢！ 文章目录vue使用better-scroll监听滑动效果效果图前提准备template初始化及使用better-scroll样式scss 效果图 当滑到 商品介绍 时， 显示元素，...
如何使用better-scroll以及遇到滑动失效等问题（vue）
weixin_57286220的博客
12-03 2235
当我们在移动端上进行触控滑动的时候，明明代码写的没有什么问题，但就是滑动十分的不流畅，用了很多css样式和数据优化都改变不大，于是在尝试用better scroll了之后，解决了这个问题。 但在第一次尝试使用的时候，遇到了引入了better scroll，但就是页面组件里不滑动。（我使用的是在页面中单个组件滑动） 总结了一下，有一下几点在使用的时候需要注意的地方： 1:首先就是在需要滑动的组件中引入（先npm下好组件） import BScroll from "better-scroll"; 2:一定要在
better-score获取滑动距离的坑
weixin_34205076的博客
05-05 341
this.contentScroll = new BScroll(this.$refs.contentWrap,{ probeType:3,//探针，获取滑动距离必备 click:true }); //然后通过 this.contentScroll.on('scroll',(pos)=>{ this.sc...
mybatis 级联查询兑现_Mybatis 级联查询如何实现？
06-06
Mybatis的级联查询可以通过在Mapper文件中使用嵌套查询的方式实现，具体步骤如下： 1. 在POJO类中定义关联属性（如一对多、多对多等），并提供对应的setter和getter方法。 2. 在Mapper文件中定义对应的嵌套查询...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值