级联滑动，better_scroll

已于 2022-03-13 16:23:07 修改
阅读量160 收藏
点赞数
分类专栏： 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 1222
做动态报表时，报表表头和内容是分开绘制的，如需加水平的滚动条，那么必须保证两个table同步
cas.rar_MATLAB 级联失效_级联_级联失效 代码_级联失效代码_级联失效算法
07-14
网络级联失效算法,及实现代码，源码，在级联失效编程中
better-scroll实现菜单和列表滚动效果联动。
SilenceJude的博客
09-04 4159
上一篇中，我们使用better-scroll实现了列表滚动效果，但是并没有与菜单栏关联起来，这里我们就实现左右联动功能。 解决思路：右侧滚动的时候，可以通过获取右侧列表栏实时的Y轴坐标，然后判断Y轴坐标落在某一个区间，记录下该区间的数组下标，判断左侧高亮的数组索引下标，绑定一个动态类赋予给标的菜单数组索引即可。...
better-scroll 监听当前滚动距离
sxl131415的博客
07-06 2171
BetterScroll：可能是目前最好用的移动端滚动插件
weixin_34381666的博客
09-12 480
作者：滴滴webapp架构组-付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。 由于它基于原...
有关better-scroll的左右联动问题（层及关联）
Lovelyclown的博客
05-15 455
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
Hqiaoqidianping.rar_H桥 逆变器_H桥级联逆变器_级联 逆变器_级联H桥_级联H桥逆变
07-14
H桥级联逆变器的matlab/sumlink仿真
级联H桥光伏并网逆变器研制_付裕.zip_多电平逆变器_级联H 桥_级联H桥_级联光伏逆变_级联多电平
07-15
模块化多电平逆变，可以多个模块同时工作，可以随意切入切出模块
H_CLS.rar_H桥级联spwm_Multilevel bridge_级联H桥_级联多电平_载波层叠SPWM
07-13
H桥级联多电平逆变器载波层叠SPWM调制
statcom.rar_statcom 级联_同步补偿statcom_级联多电平_级联补偿器_静止同步补偿
07-14
级联多电平静止同步补偿器，采用载波移相法产生触发脉冲，触发IGBT。
关于betterscroll 默认向上滚动一段距离 解决方式
黄治文的博客
03-06 1345
最近一直用betterscroll 来做页面的滚动 下拉刷新 上拉加载 等。也遇到一些很头疼的问题，今天先解决一个我实际遇到的问题 问题描述 下图是我未加better scroll之前的页面 可以看出每一条顶上都会有10px的间距。而加上betterscroll之后。再看一下页面 我的第一条10px的被吞掉了，直接从内容开始的。检查元素一看如下 它给我向上移动了10px，这就有点费解了。 问...
商品详情页的级联滚动
Boo_crob的博客
08-13 1170
实现效果： 点击tab中的选项，页面上下滚动到指定位置 页面滚动的指定位置，tab也选中指定的选项 解决思路： 先给指定的位置，各添加一个唯一id，（方便后续使用 uni.createSelectorQuery().select(’#’+that.idname).boundingClientRect(function(res) 定位到我要的id位置），并在data添加一个idname变量 比如说我的样式代码 //这里是我的tabs切换选项卡 current双向绑定当前所在下标 ， tabChan
better-score获取滑动距离的坑
weixin_34205076的博客
05-05 335
this.contentScroll = new BScroll(this.$refs.contentWrap,{ probeType:3,//探针，获取滑动距离必备 click:true }); //然后通过 this.contentScroll.on('scroll',(pos)=>{ this.sc...
利用better scroll制作，列表滚动（array.prototype.slice.call、$ref、findindex、clientHeight）
qq_30166005的博客
11-13 200
一、总体思路： 1.监测和收集滚动条滚动实时坐标，利用到的better scroll里的on方法监听scrollEnd、scroll事件 2.收集每一个菜单得到高度，利用的收集一个li（li里面嵌套ul实现多级菜单）菜单下ul的高度 3.实现滚动过程中菜单跟着滚动变化的计算逻辑。 二、交互实现过程 1.tip：要在数据获取后才创建滚动，所以在mouted的回调函数里用到$nextTick() mounted() { this.$store.dispatch('getShopsFo
better-scroll的使用
weixin_46500485的博客
11-18 1809
1.首先在页面中要有一个固定高度的容器 注：.wrapper就是这个容器 且这个容器只能有一个子容器 <div class="wrapper" ref="wrapper"> <ul class="moviebox"> <li v-for="(ele,index) in movieList" :key="index" class="movieContainer">
级联菜单html手机端,JavaScript实现级联菜单的方法
weixin_42509686的博客
06-15 157
testfunction f(){var sel=document.getElementById("country");var sel2=document.getElementById("city");var cnarr1=new Array("bj","sh")var cnarr2=new Array("beijing","shanghai")var usaarr1=new Array("dc"...
better-scroll设置滑动距离如果超出可视宽口会继续滑动
zhaohanqq的博客
05-23 1386
在项目中，有很多tab，用better-scroll使滑动更流畅 产品要求每次被点击选中的tab都要趋向中间展示，不用better-scroll时即使设置了scrollleft=-100，滚动轴也只在0处就停止了，但是better-scroll后，你设置多少就能滚动多少，第一个tab真滚到中间去了，前面都是空白，这不是我们想要的效果。 解决办法是根据情况判断滚动的距离 //初始化better-sc...
两table水平滚动条级联滚动(同步滚动)。 table1放标题，table2放内容。
weixin_33697898的博客
08-04 2170
 //table1=head和table2=body水平滚动条级联滚动 $(document).ready(function () { $("#bodyPanel").scroll(function () { var scrollLeft=$("#bodyPanel").scrollLeft(); var margin_left=Number(-5)-Numbe...
如何使用better-scroll以及遇到滑动失效等问题（vue）
weixin_57286220的博客
12-03 2191
当我们在移动端上进行触控滑动的时候，明明代码写的没有什么问题，但就是滑动十分的不流畅，用了很多css样式和数据优化都改变不大，于是在尝试用better scroll了之后，解决了这个问题。 但在第一次尝试使用的时候，遇到了引入了better scroll，但就是页面组件里不滑动。（我使用的是在页面中单个组件滑动） 总结了一下，有一下几点在使用的时候需要注意的地方： 1:首先就是在需要滑动的组件中引入（先npm下好组件） import BScroll from "better-scroll"; 2:一定要在
mybatis 级联查询兑现_Mybatis 级联查询如何实现？
最新发布
06-06
Mybatis的级联查询可以通过在Mapper文件中使用嵌套查询的方式实现，具体步骤如下： 1. 在POJO类中定义关联属性（如一对多、多对多等），并提供对应的setter和getter方法。 2. 在Mapper文件中定义对应的嵌套查询语句，使用关联属性的getter方法来获取关联对象的数据，例如： ```xml <select id="findUserById" parameterType="int" resultMap="userResultMap"> select * from user where id = #{id} </select> <resultMap id="userResultMap" type="User"> <id column="id" property="id"/> <result column="username" property="username"/> <result column="age" property="age"/> <association property="department" javaType="Department"> <id column="dept_id" property="id"/> <result column="dept_name" property="name"/> </association> </resultMap> <select id="findUserWithDeptById" parameterType="int" resultMap="userResultMap"> select u.*, d.dept_name from user u left join department d on u.dept_id = d.id where u.id = #{id} </select> ``` 在上述代码中，`findUserById`只查询User表中的数据，而`findUserWithDeptById`则查询User表和Department表中的数据，并将Department作为User对象的关联属性返回。 3. 在业务层中调用Mapper接口的方法，即可进行级联查询，例如： ```java User user = userMapper.findUserWithDeptById(1); System.out.println(user.getDepartment().getName()); ``` 在上述代码中，`userMapper.findUserWithDeptById`方法会返回一个User对象，其中的Department属性已经被赋值为关联的Department对象，通过getDepartment()方法即可获取Department对象的数据。 需要注意的是，在进行级联查询时，需要定义好关联属性的类型和对应的嵌套查询语句，否则会导致查询失败或数据不完整。同时，级联查询也会增加数据库的查询开销，应该根据实际情况进行使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值