zoukankan      html  css  js  c++  java
  • Vue中的better-scroll插件

    Vue中的better-scroll插件

    在需要的文件中添加
    import BScorll from 'better-scroll';
    引用的示例代码:
    let scroll = new BScroll(Dom对象, {//options
      startX: 0,
      startY: 0
    })
    
    Vue获得Dom对象方法,
    <div v-el:food-wrapper></div>//定义对象
    this.$els.foodWrapper//获取对象
    
    (Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象)
    
    为了解决上面的问题,运用Vue的nextTick();
    (简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码。)
    
    // DOM 还没有更新
    Vue.nextTick(function () {
      // DOM 更新了
    })

    问题: 
    PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

    方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

    selectMenu(index,event){
        if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
            return;
        }
    }

    使用手册:https://github.com/ustbhuangyi/better-scroll

  • 相关阅读:
    [CF451E] Devu and Flowers
    [CF1038E] Maximum Matching
    [CF825E] Minimal Labels
    [CCPC2020绵阳L] Lottery
    [CCPC2020绵阳K] Knowledge is Power
    [CCPC2020绵阳J] Joy of Handcraft
    [CCPC2020绵阳G] Game of Cards
    [CCPC2020绵阳D] Defuse the Bombs
    [CF1082E] Increasing Frequency
    [CF301B] Yaroslav and Time
  • 原文地址:https://www.cnblogs.com/ypinchina/p/6339601.html
Copyright © 2011-2022 走看看