vue中实现左右联动的效果


Posted in Javascript onJune 22, 2018

这里的坑还是蛮多的,花了一个多小时,才理清楚。

 做一下笔记,以便于复习。

vue中实现左右联动的效果

首先呢,需要让左右的布局都可以滚动,这里使用了betterScroll

npm i better-scroll
import BScroll from 'better-scroll'
methods: {
  _initScroll () {
   this.menuScroll = new BScroll((this.$refs.menu), {
    click: true
    因为betterscroll默认会阻止点击事件。这里要设置一下
   })
   this.foodScroll = new BScroll((this.$refs.good), {
    probeType: 3
    用来获取滚动的距离
   })
   this.foodScroll.on('scroll', (pos) => {
    this.scrollY = Math.abs(Math.round(pos.y))
   })
  },

重点:

created () {
  this.$ajax.get('/api/data.json').then((res) => {
   this.goods = res.data.goods
   this.$nextTick(() => {
    this._initScroll()
    this.getGoodsHeight()
   })
  })
 },

这里的代码一定要在获取数据里面写nextTick()回调里面写代码,因为需要等待数据万泉加载再去初始化scroll和获取右边每一个盒子的高度。

说道高度,高度如何获取呢?

getGoodsHeight () {
   let goodEle = this.$refs.good
   let height = 0
   this.listHeight.push(height)
   let foodList = goodEle.getElementsByClassName('goodsItemHook')
   for (let i = 0; i < foodList.length; i++) {
    let item = foodList[i]
    height += item.clientHeight
    this.listHeight.push(height)
   }
  },

这里是获取到每一个盒子的clientHeight的高度进行叠加,在push到一个数组里面。

this.foodScroll.on('scroll', (pos) => {
    this.scrollY = Math.abs(Math.round(pos.y))
   })

获取滚动的值,赋值给scrollY。

然后根据scrollY 和listHeight的高度区间做对比,拿到index:

currentIndex () {
   for (let i = 0; i < this.listHeight.length; i++) {
    let height1 = this.listHeight[i]
    let height2 = this.listHeight[i + 1]
    if (!height2 || (this.scrollY < height2 && this.scrollY >= height1)) {
     return i
    }
   }
  }

这时候滚动就能获取index的值了,然后给左边的元素去添加active的样式就方便了。

:class="{'active': currentIndex == index}"

最后一步是如何实现点击的时候去让右边的滚动到指定的位置。

handleGoodsItem (index) {
   let goodEle = this.$refs.good
   let foodList = goodEle.getElementsByClassName('goodsItemHook')
   let el = foodList[index]
   this.foodScroll.scrollToElement(el, 300)
  }

这里调用了scroll的方法:scrollToElement。

总结

以上所述是小编给大家介绍的vue中实现左右联动的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 #Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 #Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 #Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 #Javascript
JavaScript 下载svg图片为png格式
Jun 21 #Javascript
MVVM 双向绑定的实现代码
Jun 21 #Javascript
You might like
JpGraph php柱状图使用介绍
2011/08/23 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php单例模式的简单实现方法
2016/06/10 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python中有趣在__call__函数
2015/06/21 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python3 kubernetes api的使用示例
2021/01/12 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
在职研究生自我鉴定
2013/10/16 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
安全检查验收制度
2014/01/12 职场文书
军人违纪检讨书
2014/02/04 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
2015年派出所工作总结
2015/04/24 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP