bscroll 滚动位置_BScroll左右联动导航

[TOC]

#### BScroll 制作左右联动导航

1. 图例

![](https://box.kancloud.cn/94e9f1275e82a1337d1d8a261b9b48a3_373x506.png)

2. 需求：

* [ ] 点击左侧菜单右侧滚动到对应位置

* [ ] 滚动右侧菜单左侧跟随联动

3. 实现步骤

* [ ] 监听右侧商品列表滚动Y坐标 scrollY = 0

* [ ] 求出右边商品列表累加的所有高度，存放在一个数组中 goodsList = []

* [ ] 利用计算属性，计算出 scrollY 定位在 goodsList 数组中的区间值

>[danger] 每当监听到scrollY 值改变，计算属性会重新计算，返回最新区间值

* [ ] 公式：

~~~

computed: {

...mapState({

goodsData: state => state.goodsData

}),

currentIndex() {

return this.listHeight.findIndex((item, index) => {

return !this.listHeight[index+1] || (this.scrollY >= item && this.scrollY < this.listHeight[index+1])

})

}

~~~

* [ ] 点击左侧按钮，右侧商品列表滚动到对应位置

核心算法：

~~~

scrollTo(index) {

const goodsListEl = Array.from(this.$refs.goodsList.querySelectorAll('li'))

this.listScroll.scrollToElement(goodsListEl[index], 300)

}

~~~

* [ ] 右侧滚动，左侧联动

思考：要触发左侧菜单导航联动，需要在滚动左侧菜单时，拿到对应索引，然后用scrollToElement 跳转到对应的位置

核心算法：

~~~

// 监听滚动事件

this.listScroll.on('scroll', (pos) => {

const posY = Math.round( Math.abs(pos.y) )

this.scrollY = posY

this.scrollMenu(this.currentIndex);

})

~~~

scrollMenu(index) {

const menuList = Array.from(this.$refs.goodsMenu.querySelectorAll('li'));

this.menuScroll.scrollToElement(menuList[index], 300, false, -320)

}

~~~

>[danger] 注意： this.scrollY 滚动时改变数据，会触发计算属性重新计算，然后根据计算属性返回的索引值来跳转对应的菜单导航

bscroll 滚动位置_BScroll左右联动导航相关推荐

bscroll 滚动位置_better-scroll初始滚动位置
1.某些业务需求,需要缓存之前选择的滚动位置.例如记录当前选择列表li的索引,下一次访问该页面的时候初始滚动到该索引.请问better-scroll里面有没有什么好方法?我调用自带的scrollToE ...
bscroll 滚动位置_scroll lock键在哪里？
展开全部不同的笔记本,键盘有所区别.有些有Scroll Lock键,有些没有. 你可以在键盘区找e68a84e8a2ad323131333532363134313032313635333133336 ...
VUE饿了么学习笔记（6）goods界面滚动和点击联动的实现
使用插件Bscroll,在依赖文件package.json中添加版本,在install,run之后使用 1)import BScroll from 2)BScroll实例化的时候要接收一个DOM,此处 ...
vue 页面A转到页面B,B页面停留在A页面的滚动位置
如果页面A沿Y轴滚动一段距离,然后跳转到页面B;在进入B页面时,B页面已经滚动到页面A的距离,返回页面A,发现A还在之前的滚动位置: 在路由守卫回调中,设置每次进入路由时,将window的scroll ...
wangEditor 菜单栏随页面滚动位置改变（吸顶）问题解决
wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决参考文章: (1)wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决 (2)https://www.cnblogs.com/ ...
pyqt qscrollarea 设置滚动位置
现在的问题,当只有一页时,不能判断滚轮滚动方向:多页的话,可以通过位置变化来判断 print(event.pixelDelta().x(), event.pixelDelta().y()) 获取位置: ...
vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive:t ...
android expandablelist 自动滚动,在ExpandableListView中，如何保留滚动位置_android_开发99编程知识库...
在一些实验之后我做了一个满意的解决,它还保留了很好的滚动位置顶部可见项. 事实上,三种不同部分的信息需要保存和恢复: 状态( e .g列表. 其中组被展开),第一个可见项的索引和优良滚动位置. 不幸的 ...
recyclerview 加载fragment_恢复 RecyclerView 的滚动位置
您可能在开发过程中遇到过这种情况,在 Activity/Fragment 被重新创建后,RecyclerView 丢失了它之前保有的滚动位置信息.通常这种情况发生的原因是由于异步加载 Adapter ...
[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...

bscroll 滚动位置_BScroll左右联动导航

bscroll 滚动位置_BScroll左右联动导航相关推荐

最新文章

热门文章