资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么在vue中使用better-scroll实现一个列表左右联动效果

本篇文章给大家分享的是有关怎么在vue中使用better-scroll实现一个列表左右联动效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联建站是专业的高昌网站建设公司，高昌接单;提供网站设计制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行高昌网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

一.实现思路

  1. (1)实现上是左右分别一个better-scroll列表

  2. (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置

二.实现

1.实现左右两个better-scroll

(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)

左边滚动列表dom
 
   
    
    
     
       0" class="icon"
       :class="classMap[item.type]">{{item.name}}
     
    
   

  
右边滚动列表dom    
              {{item.name}}      
                                     
                {{food.name}}         {{food.description}}

                  月售{{food.sellCount}}份          好评率{{food.rating}}%                     ¥{{food.price}}           ¥{{food.oldPrice}}          
                                         

在数据请求完成后的$nextTick中初始化better-scroll,就能实现两个列表分别能滚动,至于联动,要后面自己做

_initScroll() {
    this.menuScroll = new BScroll(this.$els.menuWrapper,{
     click:true  //允许better-scroll列表上的点击事件
    });
    this.foodsScroll = new BScroll(this.$els.foodWrapper,{
     probeType : 3  //让better-scroll监听scroll事件
    });
    this.foodsScroll.on('scroll',(pos) => {
     this.scrollY =Math.abs(Math.round(pos.y));
    })
   },

2.实现联动效果

(1)具体的联动实现思路

  1. 在渲染完成后($nextTick内),初始化better-scroll,并在初始化函数内添加右侧列表的scroll监听事件,并记录scrollY值到,存入vue的data中

  2. 在渲染完成后($nextTick内),计算右侧列表的每一个大区块的高度,并累加,存入数组listHeight

  3. 因为scrollY值在滚动中总是不断变化的,所以在computed中计算出currentIndex,当前滚动区域是哪一个大区块,也就是listHeight数组的下标

  4. 在dom中根据currentIndex应用左侧列表被点中的样式

  5. 在左侧列表某一项被点中的时候,右侧列表滑动到某一个大块区域,

//初始化better-scroll
_initScroll() {
    this.menuScroll = new BScroll(this.$els.menuWrapper,{
     click:true
    });
    this.foodsScroll = new BScroll(this.$els.foodWrapper,{
     probeType : 3
    });
    this.foodsScroll.on('scroll',(pos) => {
     this.scrollY =Math.abs(Math.round(pos.y));
    })
   },
_calculateHeight() {
    let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
    let height = 0;
    this.listHeight.push(height);
    for(let i=0;i
computed: {
   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 >= height1 && this.scrollY < height2)){
      return i;
     }
    }
    return 0;
   }
  },

   
    
    
    
     
       0" class="icon"
       :class="classMap[item.type]">{{item.name}}
     
    
   

  
//被点击事件
//dom

   
    
    
    
     
       0" class="icon"
       :class="classMap[item.type]">{{item.name}}
     
    
   

  
//js  
selectMenu(index,event) {
    if(!event._constructed) {
     return ;
    }
    let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
    let el = foodList[index];
    this.foodsScroll.scrollToElement(el,300);
   },
以上就是怎么在vue中使用better-scroll实现一个列表左右联动效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
            
            
                        

            分享文章：怎么在vue中使用better-scroll实现一个列表左右联动效果            

            当前URL：http://www.cdkjz.cn/article/jhossg.html
        
        

            返回首页
            了解更多建站资讯
        

    



    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    网站建设方案添翼二手车鉴定护栏钻孔机软文发稿成都小程序开发江油网站建设腾讯云免备案空间成都机柜租用移动服务器托管成都服务器租用                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图