vue中实现左右联动的效果

2024-09-28 20:33:31

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

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

首先呢，需要让左右的布局都可以滚动，这里使用了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中实现左右联动的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

使用vue.js实现联动效果的示例代码

想用vue.js写一个联动效果,按照自己的思路实验了下,并没有成功.请大家指点下我的思路是:通过遍历YX数组,如果某个对象的text和第一个select的selected value相同,则显示对应院系的专业 <div id="test"> <select v-model="A"> <option v-for="yx in YX"> {{yx.text}} </option> </select
Vue2仿淘宝实现省市区三级联动

三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样--为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:vue.json(这个直接是个data,放入你的vue2项目中即可.(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的.请配合博客再下载此json)). 首先页面显示如下: 然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取) 这个张什么样,以什么形式出现,取决于贵公
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动) 先去下载一个"省份.城市.区县.乡镇" 四级联动数据,然后引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 <mt-picker :slots="addressSlots" class="picke
vue.js模仿京东省市区三级联动的选择组件实例代码

前言在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发实例代码 html代码如下  <section class="showChose" v-show="showChose"> <section cl
vue左右侧联动滚动的实现代码

本文介绍了vue左右侧联动滚动的实现代码,分享给大家,具体如下: 实现功能: 点击左侧,右侧滚动到相应位置, 滚动右侧, 左侧滚动到相应位置布局结构: 开源滚动库: better-scroll.js 技术要点: 1.<scroll>是对紧邻的元素生效如: <scroll class='foods-wrapper'> <ul class=content> <li></li> </ul> </scroll> 初始化在<
Vue中的ref作用详解(实现DOM的联动操作)

其实官网已经讲的很仔细了,只是我个人可能接受能力比较差,并没有立刻明白他的意思.不过使用之后就很明白了.这里主要举个例子来说明: 我想要的效果是点击保存的同时,也能点击重置这个按钮,触发reset,ref这个特性就帮我达到了DOM的一个联动效果. 总结
vue基于mint-ui的城市选择3级联动的示例

项目是基于 vue2 的移动端项目 1.实际效果地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据如下: https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) 3.具体代码主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <m
vue省市区三联动下拉选择组件的实现

我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用我们今天来实现一个利用vuejs开发的省市区三联动的组件 CitySelect.vue组件首先来看一下最终的效果(没有写太多的样式...) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了): provinces.js 这个数据中有这样几个字段: code: 当前省市区的编码 sheng: 当前所在的
vue中实现左右联动的效果

这里的坑还是蛮多的,花了一个多小时,才理清楚. 做一下笔记,以便于复习. 首先呢,需要让左右的布局都可以滚动,这里使用了betterScroll npm i better-scroll import BScroll from 'better-scroll' methods: { _initScroll () { this.menuScroll = new BScroll((this.$refs.menu), { click: true 因为betterscroll默认会阻止点击事件.这里要设置一
vue中使用better-scroll实现滑动效果及注意事项

一.首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.11.1" 版本以github上为准(目前最新) 2.cpnm install 在node_modules 可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二.better-scroll优点 1.体验像原生:滚动非常流畅,而且没有滚动条. 2.滚动位置固
在Vue中如何实现打字机的效果

目录最终效果具体代码如下前一段时间找工作做网页简历,想实现打字机的效果. 按理说像打字机这种动画效果的实现首选是jquery,毕竟jquery还是以操作dom为主,而vue是数据驱动,但是jquery并没有能狗满足我设想的功能的插件,又偷懒不想自己实现双向绑定,只好自己用vue实现. 代码写的不是很漂亮,希望大家不喜勿喷,这里只是提供一个思路. 最终效果 I‘m ByPunk!I‘m looking for a job.I‘m a front-end programmer.I‘m codi
Vue中的scoped实现原理及穿透方法

何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp
基于vue中的scoped坑点解说

今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件.通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的. 代码如下: //valChange.less(使用了嵌套规则) #valueSlide{ .bigSlider
Ant design vue中的联动选择取消操作

项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType">  <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag
vue实现列表左右联动效果

本文实例为大家分享了vue实现列表左右联动效果的具体代码,供大家参考,具体内容如下先谈需求:左侧为分类列表,点击分类名右侧商品列表会滑动对应分类到顶部:右侧商品列表滑动到某一分类时左侧分类列表对应分类会滑动到顶部高亮显示. 再来说说思路: 1.引用swiper插件,这种方法冲突和不适配可能性太多,会越改越麻烦所以弃用.2.使用页面滑动scroll事件,引入better-scroll组件.这个较为轻便,可自定义性较大,可以使用. 实现步骤: 1.左右两侧均使用v-for循环列表,使用index来
vue 中基于html5 drag drap的拖放效果案例分析

事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o
vue项目中仿element-ui弹框效果的实例代码

最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le
vue中v-for通过动态绑定class实现触发效果

vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo

vue中实现左右联动的效果

相关推荐

随机推荐