为了账号安全,请及时绑定邮箱和手机立即绑定

vue better-scroll 实现滚动

标签:
Vue.js
  1. npm下载 better-scroll插件
    npm install better-scroll --save
    引入import BScroll from 'better-scroll'

  2. 定义data 变量
    data() {
    return {
    goods:[],
    listHeight:[],
    scrollY:0,
    }
    }
    图片描述
  3. 写样式
    a.获取dom结构的父容器内添加ref="foodwrapper"
    b. :class="{'current':currentIndex == index}"
    c. class="food-list good-List-hook"
    图片描述
  4. 用this.$refs.menuwrapper获取到dom。
    initScroller() {
    this.menuScroll = new BScroll(this.$refs.menuWrapper, {
    click:true
    });
    this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
    probeType:3 ,
    click:true
    });
    this.foodsScroll.on('scroll', (pos) => {
    this.scrollY = Math.abs(Math.round(pos.y)) ;
    })
    },
  5. 组装高度 listHeight:[],
    calculateHeight(){
    let goodsList =this.$refs.foodsWrapper.getElementsByClassName('good-List-hook');
    let height = 0;
    this.listHeight.push(height);
    for(let i=0;i<goodsList.length;i++){
    let item = goodsList[i];
    height += item.clientHeight;
    this.listHeight.push(height);
    }
    },
    图片描述
  6. 回调this.initScroller(); this.calculateHeight();事件
    created() {
    this.$nextTick(() =>{
    this.initScroller();
    this.calculateHeight();
    });
    }
    图片描述
  7. 计算高度listHeight 的当前值currentIndex
    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;
    }
    }
  8. 点击事件高亮
    selectMenu(index,event){
    if(!event._constructed){
    return;
    }
    let goodsList = this.$refs.foodsWrapper.getElementsByClassName('good-List-hook');
    let el = goodsList[index];
    this.foodsScroll.scrollToElement(el,300);
    },

7.如果报错可能是要加上
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
图片描述

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
10

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消