小程序远景怎样_vue中完成左右联动的效果

  • 栏目:公司新闻 时间:2021-01-08 14:26 分享新闻到:
<返回列表

vue中实现左右联动的效果       这篇文章主要介绍了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中实现左右联动的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


分享新闻到:

更多阅读

小程序远景怎样_vue中完成左右联动的效果

公司新闻 2021-01-08
vue中完成上下连动的实际效果 本文关键详细介绍了vue中完成上下连动的实际效果,十分...
查看全文

广州凡科互联网科技股份有限公司招聘仓

公司新闻 2021-01-08
招聘人数:19职位信息1、负责统计员工月度考勤,完成相关报告表,按时上报相关部门;2、负...
查看全文

广州凡科互联网科技股份有限公司招聘天

公司新闻 2021-01-08
招聘人数:19职位信息岗位职责:1、通过千牛及京麦等交流软件为顾客提供导购服务促成销售...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号