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 相关文章推荐
javascript常用函数(1)
Nov 04 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python使用wxPython实现计算器
2018/01/30 Python
python修改FTP服务器上的文件名
2019/09/11 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python dict如何定义
2020/09/02 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
应届护士推荐信
2013/11/16 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
高温慰问简报
2015/07/21 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
爱国之歌(8首)
2019/09/29 职场文书