vue使用bscroll左右菜单联动,左侧栏目无法跟随右边滑动切换active

因为公司后端用其他框架,所以都是用cdn引用js写在一个页面了,现在只能达到点击左侧栏目、右侧到对应的栏目位置,但是右侧滑动的时候,左边栏目不跟随切换active

是右边li的索引值没有传到左边去吗?但是左边可以获取右边的索引了,点击也可以联动

html代码

<div class="content">

    <!--左边-->
    <div class="menu-wrapper" ref="menuWrapper">
        <ul>
            <li v-for="(food,index) in foods" @click="menuClick(index,$event)" :class="{'active': activeIndex == index}">
                {{food.class}}
                <i class="num"></i>
            </li>
        </ul>
    </div>

    <!--右边-->
    <div class="foods-wrapper" id="wrapper" ref="foodsWrapper">
        <ul>
            <li v-for="(food,index) in foods" :key="food.id" class="food-list-hook">
                <div class="class-title">
                    {{food.class}}
                </div>
                <div v-for="food in food.list">
                    <div class="item">
                        <div class="itemleft" @click="menuShow(food)">
                            <div class="item-img">
                                <img :src="food.imgs" alt="">
                            </div>
                        </div>
                        <div class="itemright">
                            <div class="title">
                                {{food.name}}
                            </div>
                            <div class="price">
                                <i class="fa fa-cny"></i>
                                <span>
                                    {{food.price}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>

js代码

new Vue({
    el: '#app',
    data() {
        return {
            foods: [],
            listHeight: [],
            foodsScrollY: 0
        }
    },

    created() {
        axios.get('data.json').then(response = >{
            this.foods = response.data.foods;
            this.$nextTick(() = >{
                this._initScroll(); // 初始化scroll
                this._calculateHeight(); // 初始化列表高度列表
            })
        });
    },
    computed: {
        activeIndex() {
            for (let i = 0; i < this.listHeight.length; i++) {
                let topHeight = this.listHeight[i] let bottomHeight = this.listHeight[i + 1]
                if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {
                    return i
                }
            }
            return 0
        }
    },
    methods: {
        _initScroll() {
            this.menuWrapper = new BScroll(this.$refs.menuWrapper, {
                click: true
            });
            this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
                probeType: 3
            });
            // 监控滚动事件
            this.foodsScroll.on('scroll', (pos) = >{
                this.foodsScrollY = Math.abs(Math.round(pos.y))
            })

        },
        _calculateHeight() {
            let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let height = 0 this.listHeight.push(height) for (let i = 0; i < foodList.length; i++) {
                let item = foodList[i] height += item.clientHeight this.listHeight.push(height)
            }
        },
        menuClick(index, event) {
            if (!event._constructed) {
                return
            }
            this.foodsScroll.scrollTo(0, -this.listHeight[index], 300)
        }
    }

});


0
扫码支付0.1元 ×
其他相关推荐
vue和better-scroll实现列表左右联动效果
一.实现思路 (1)实现上是左右分别一个better-scroll列表 (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置 二.实现 1.实现左右两个better-scroll (1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域) 左边滚动列表dom div class="menu-wrapper" v-el:menu-w
基于mpvue实现左侧导航与右侧内容的联动
效果图如下:      (1)左侧导航联动右侧内容 实现:点击左侧导航,右侧内容滑到对应的位置,并且导航上有current当前样式。 mpvue用的还是微信小程序提供的组件scroll-view,它里面有一个属性scroll-into-view,值为某子元素的id,滚动到该元素。 template: &amp;lt;scroll-view class=&quot;menu-wrapper&quot; scrol...
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边
仿美团外卖两个ListView联动,左边点击切换右边,右边滑动切换左边. 并且右边伴有标题的切换
vue中如何实现左右联动的效果?
这里的坑还是蛮多的,花了一个多小时,才理清楚。 做一下笔记,以便于复习。 首先呢,需要让左右的布局都可以滚动,这里使用了betterScroll npm i better-scroll import BScroll from 'better-scroll' methods: { _initScroll () { this.menuScroll = new BScro...
仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边 先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示出来,再如果这个条目的类型和上一个条目的类型不一样,就让这个条目的标题显示出来,否则
滑动时切换页面,同时页面显示导航点进行导航,实现联动与导航效果
滑动时切换页面,同时页面显示导航点进行导航,实现联动与导航效果
vue中使用better-scroll实现滑动以及左右联动效果
一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以github上为准(目前最新) 2.cpnm install 在node_modules 可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二、better-s...
Vue实现左右菜单联动实现
知乎 个人博客 Github 源码传送门:Rain120/vue-study 之前在外卖软件上看到这个左右联动的效果,觉得很有意思,所以就尝试使用Vue来实现,将这个联动抽离成为一个单独的组件,废话少说,先来一张效果图。 这个组件分为两个部分,1、左菜单;2、右菜单。 左菜单的DOM结构 &amp;amp;lt;scroll class=&amp;quot;left-menu&amp;quot; :data=&amp;quot;left...
better-scroll实现菜单和列表滚动效果联动。
上一篇中,我们使用better-scroll实现了列表滚动效果,但是并没有与菜单栏关联起来,这里我们就实现左右联动功能。 解决思路:右侧滚动的时候,可以通过获取右侧列表栏实时的Y轴坐标,然后判断Y轴坐标落在某一个区间,记录下该区间的数组下标,判断左侧高亮的数组索引下标,绑定一个动态类赋予给标的菜单数组索引即可。...
android 商城左边菜单,右边联动
项目的需要,类似于大多数商城一样的左菜单,右内容的。实现左右联动的效果。在网上也找了些Demo 但是效果都不理想,所以就自己手动写了一个,虽然也没有太多的技术含量,但是效果还是不错的。      实现的原理就是两个Listview 进行绑定。根据滑动的位置进行相应的左右联动。直接上效果图:     下面是核心代码MainActicity,主要是使用了ListViewde的滑动监听 set
小程序滚动组件,左边导航栏与右边内容联动效果实现
最近公司要开发小程序,趁着ui还没出来,先把一些功能实现一下。其中有一个功能,需要左边的导航栏和右边的内容对应联动,其实就想饿了么外卖的选单界面,但是在小程序里实现又有点不同了。最终效果如图(丑是丑了点,关注功能就好)右边内容容器是可以滚动的,可以使用小程序提供的scroll-view组件,要强调的是,必须给节点设置高度滚动的问题好解决,那么联动呢?我们需要的联动必须是左右相互的,即点击导航栏,内...
vue利用better-scroll实现通讯录式列表滚动和左右联动效果(1)
1.点击右侧字母,滚动到相应的列表位置 首先在右侧字母列表监听touchstart事件,当事件发生时则执行相应的函数 函数内容 onShortCutTouchStart (e) { let anchorIndex = getData(e.target, 'index') this.touch.anchorIndex = anchorIndex this....
左侧菜单栏右侧内容(改进,有js效果)
[color=blue][size=small](如有错敬请指点,以下是我工作中遇到并且解决的问题)上一篇文章是简洁版[/size][/color] [size=small]这是上一篇文章的改进。 上一篇文章的左侧菜单是没有子目录的。 这是效果图: [/size] [img]http://dl2.iteye.com/upload/attachment/0119/9316/4e...
vue.js点餐app手机触屏滑动分类菜单切换代码
智能点餐app手机触屏滑动分类菜单切换代码,代码简单,修改方便!
左侧菜单栏控制右侧页面内容切换
本demo所需技术:jQuery+Bootstrap 本demo所用工具:IDEA 本demo主要实现功能: 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
VUE饿了么学习笔记(6)goods界面滚动和点击联动的实现
使用插件Bscroll,在依赖文件package.json中添加版本,在install,run之后使用 1)import BScroll from 2)BScroll实例化的时候要接收一个DOM,此处将实例化并获取DOM的过程封装成方法,获取DOM &amp;lt;div class=&quot;menu-wrapper&quot; ref=&quot;menuWrapper&quot;&amp;gt; &amp;lt;div class=&quot;foods-...
iOS左侧滑动菜单栏
github:https://github.com/Super-lying/MenuDemo 上面是一个左滑菜单的Demo
vue2.0——项目开发_better-scroll 实现移动端滑动
better-scroll + vue2.0 实现移动端滑动——左右联动效果:滑动右侧时,左侧也能有相应的变化;点击左侧时,右侧也能自动定位到相应的位置。如下图所示界面,左侧为分栏,右侧为分栏详情。滑动右边使左边联动的大概的思路:      1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中。      2)实现左边联动,则必须要监控 “scroll”事件,获取其高度      3)将sc
Android 实现Tag跟随左侧内容联动,当宽度达到屏幕宽度时,Tag固定在右侧
效果图: 1. 文字加tag未达到屏幕最大宽度 2. 文字加tag达到屏幕最大宽度 实现原理: 使用Linerlayout的weight属性,分配剩余空间,不指定weight时,按照实际宽度分配。 源码 layout文件 &amp;lt;LinearLayout android:layout_width = &quot;wrap_content&quot; ...
关于移动端的一个左右侧栏目滑动的效果
很多人可能在手机上面看到过一个效果 百度地图 什么值得买等APP都有 点击右上角的这个图标
仿美团、京东、饿了么点击左边列表 右边切换布局UI
实现思路:一个activity中添加2个fragment,左边的frgament继承自ListFragment,右边的frgament只是做布局UI上的改变直接继承自Fragment,当点击左边列表的某一项item右边的fragment显示对应的信息 MainActivity中布局文件xml中主要是放置两个FrameLayout:     xmlns:app="http://schem
微信小程序开发— 菜单内容左右联动 & MD5加密
小程序无法获取元素的宽高,位置信息,只能通过后台计算,但是存在较大的机器误差,不知有啥好的解决方案?
vue基于better-scroll制作左右联动滑动页面
界面如下: vue模板 &amp;amp;amp;amp;lt;template&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;goods&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;menu-wrapper&amp;amp;amp;quot;&amp;amp;amp;
vue--简单的侧边导航和页面中的内容联动
------简单展示 pc端有个侧边导航和页面内容联动需求,看图片: 随着鼠标在页面中滚动,根据页面滚动高度,相对应的导航内容高亮 下面看代码 -------HTML部分 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;app&quot; &amp;gt; &amp;lt;!-- 导航 --&amp;gt; &amp;lt;div class=&quot;nav&quot; id=&quot;box_action_translateYOut&quo
java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这样的URL请求页面,出现如图所示内容; 该页面包含四部分,顶部目录+左侧菜单+右侧菜单+右下侧数据列表; 左侧菜单包含一级菜单和二级菜单,点击某个一级菜单时打开对应的二级菜单,同时右侧也显示二级菜单;选中左侧某个二级菜单,右侧对应的二级菜单也被选中,点击右侧二级菜单,显示对应的三级菜单,默认选中三级菜单的全部,点击某个三级菜单,列表中
vue仿饿了么app中vue和better-scroll实现列表左右联动效果
一.实现思路(1)实现上是左右分别一个better-scroll列表 (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置12二.实现1.实现左右两个better-scroll(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)左边滚动列表dom &amp;lt;div class=&quot;menu-wrapper&quot; v-el:menu-wrapper&amp;gt;...
仿网易点击左侧菜单右侧出现选项卡功能
仿网易邮箱的点击左侧菜单右侧出现可关闭的选项卡功能,jquery+css+div代码
vue利用better-scroll实现通讯录式列表滚动和左右联动效果(2)
3.右边字母列表滑动或者点击时对应的字母高亮 _calculateHeight () { this.listHeight = [] const list = this.$refs.listgroup let height = 0 this.listHeight.push(height) for (let i = 0; i &amp;lt; ...
vue.js实现左边导航切换右边内容
&amp;lt;template&amp;gt; &amp;lt;div class=&quot;layout-container&quot;&amp;gt; &amp;lt;y-header&amp;gt; &amp;lt;div slot=&quot;nav&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/y-header&amp;gt; &amp;lt;div class=&quot;w&quot;&amp;gt;
移动端的导航栏联动(滚动监听)
背景: 某网上商城(移动端)产品展示页面。 需求: 在导航栏上有多个导航链接,分别对应主体内容中的某个部分。 要求:1)通过单击完成页面内容的滚动定位。    2)用户通过浏览器滚动页面时,到达相应的位置,需要将对应的导航标志选中样式。 问题: 1)是否可以使用bootstrap提供的滚动监听? 回答:可以的,同时需要修改原本样式的可能性非常大。 2)为何没有使用bootstra
微信小程序分类-左侧导航与右侧内容联动
左侧导航与右侧内容联动一、首先是点击左侧导航,我们右侧内容需要滑动至相应的位置。 思路是:点击左侧某一项,获取该元素的id,也就是左侧view的id,然后动态传到右侧内容的scroll-into-view,scroll-into-view的值为某个子元素的id, 这里的子元素说的是右侧的view,我们将左侧view的id和右侧view的id设置为同一个值时,这样当左侧id发生变化时,scroll...
微信小程序顶部tab切换,可滑动切换,导航栏跟随滚动实现
wxml代码: &amp;lt;view class=&quot;container&quot;&amp;gt; &amp;lt;!-- tab导航栏 --&amp;gt; &amp;lt;!-- scroll-left属性可以控制滚动条位置 --&amp;gt; &amp;lt;!-- scroll-with-animation滚动添加动画过渡 --&amp;gt; &amp;lt;scroll-view scroll-x=&quot;true&quot; class=&q
饿了么项目---8、关于iscoll的扩展 better scroll的使用----左右菜单联动(2)
本章重点: - 如何使用better scroll的事件派发 - better scroll的滚动监听事件、如何滚动元素、如何实现左右联动的巧妙逻辑 一、效果图二、需求分析 分块: good.vue组件主要分为左侧菜单区、右侧内容区、底部购物车区 单侧联动之当右侧内容区滚动时需要滑动到左侧相应菜单块. 使用better scroll 滚动监听事件,监听当前滚动的y轴坐标scrollY 内容区
swiper模仿app导航联动
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 1 Slide 2 Slide 3 Slide 4
简单实现左右两个listview联动,点击左边切换右边
原理:     左右两个listview联动,无非是左边的listView设置条目点击事件,点击之后,先改变左边条目点击后的状态,再改变右边适配器的数据源 步骤 1.在MainActivity中布局文件创建左右两个listView     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="
仿淘宝UED的左边跟随鼠标滑动导航
仿淘宝UED的左边跟随鼠标滑动导航
better-scroll实现列表联动(移动端)
在移动端手机滑动浏览列表是没有滚动条的,那么如何实现没有滚动条又能够滚动呢? 这时候会用到一个常用的插件:better-scroll,利用它来实现移动端的滚动。其原理是利用translate来实现滚动,看下调试: 这个div是需要滚动的列表的父元素,transition-timing-function是为了让translate这个过渡效果更像原生scroll。 使用这个组件你需要有特定的结构,借一...
Axure左边菜单,右边显示内容案例
Axure8.0制作选择左边菜单栏,右边显示相关内容案例,相关详细图文操作,可以参考博客内容:http://blog.csdn.net/ffacffac/article/details/67639914
用vue+Element-ui写一个后台管理界面,点击头部导航对应显示下方左侧导航菜单,点击左侧菜单对应显示右边内容,点击右边内容的按钮出现一个新页面依旧能够选中左侧相应菜单,求解决???!!!!
vue-路由 用vue+Element-ui写一个后台管理界面,点击头部导航对应显示下方左侧导航菜单,点击左侧菜单对应显示右边内容 但是点击新建微帖路由出现一个新页面,左侧菜单怎么才能显示被选中状态,就是跟上图状态一样??? 这里是左侧菜单导航和右边内容显示区域代码 这里是页面按钮 下面这里是路由配置 头部导航对应的左侧导航是遍历得到的 有没有大佬私聊我提供解决方案,感谢!!! ...
导航栏联动效果( HorizontalScrollView+ViewPager)
以HorizontalScrollView与Viewpager实现分页滑动,类似淘宝分页滑动效果,其中头部局可以自定义
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链的栏目 微信菜单开发教程