zoukankan      html  css  js  c++  java
  • better-scroll无法滚动的问题。

    better-scroll无法滚动的问题。
    1
    遇见better-scroll(以下简称:BS)无法滚动,可从两方面去考虑。
    一是层级关系出错,二是计算高度出错。
    ###1,层级关系
    BS的基本结构是:一个wrapper层,一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。

    <div class="wrapper">
      <div class="content">
        content...
      </div>
    </div>

    new BS('wrapper');
    简单点说,就是:wrapper占住位置,content在wrapper里面滚动。
    自然,创建BS对象的时候传入的dom也该是wrapper。同时,wrapper里面不能存在多级div,也就是说,所有内容都需要被包含在一个content中。

    检测此部分是否正确,只需要打开检查工具,查看content上是否被附加了一些用于滚动的额外的style。

    style="pointer-events: auto; transition-property: transform; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"

    ###2,页面高度计算
    当层级关系检查无误但还是无法滚动,则建议打印BS对象查看一下。
    关注两个变量:hasVerticalScroll和scrollerHeight。
    如果hasVerticalScroll为false,则一定时wrapper和content计算高度时出错了。此时,对比下scrollerHeight和wrapperHeight,多半是前者小于等于后者。然后,手动修改hasVerticalScroll为true,会发现可以拖拽,但不是滚动。这是因为scrollerHeight计算错误。这就需要根据具体情况去查找原因了。

    父级wrapper不能设height 100% , 否则scrollerHeight=wrapperHeight

    高度计算出错多半是因为dom没更新完就初始化BS。(BS必须在dom完成之后被初始化)  $nextTick

  • 相关阅读:
    关于Android的布局
    一个新的开端
    Flux的基础概念和实战入门
    在Redux中使用插件createAction之后
    学习
    Object.assign() 对象的扩展
    Redux 中的CombineReducer的函数详解
    React组件的防呆机制(propTypes)
    css的新特性 calc () 使用
    shim和polyfill有什么区别
  • 原文地址:https://www.cnblogs.com/huhanqing/p/10083901.html
Copyright © 2011-2022 走看看