第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

vue better-scroll 實現(xiàn)滾動

標簽:
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)
}
图片描述

點擊查看更多內(nèi)容
4人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消