better-scroll插件无法滚动原因排除

一、DOM层级关系

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

wrapper里面不能存在多个同级div,如果你这样写:

<div class="classifyTitle"  ref="wrapper">  
    <div class="">  
    ss  
    </div>  
    <ul>  
      <li v-for="(item,index) in classifyData.products">  
        <router-link :to="{name:'详情'}">{{item.title}}</router-link>  
      </li>  
    </ul>  
</div>  

那么ul中的元素将不能滚动

二、content是否被成功添加滚动相关style

以此dom结构为例:

1.<div class="classifyTitle"  ref="wrapper">  
2.    <ul>  
3.        <li v-for="(item,index) in classifyData.products">  
4.        <router-link :to="{name:'详情'}">{{item.title}}</router-link>  
5.        </li>  
6.    </ul>               
7.</div>  

审查元素可以看到:


图片1.png

这样即添加成功的

三、wrapper 与 content 高度问题

只有content的高度大于wrapper高度时候,才可以滚动。
如何看?

1.this.$nextTick(() => {  
2.    if (!this.scroll) {  
3.    this.scroll = new BScroll(this.$refs.wrapper, {})  
4.    console.log(this.scroll)  
5.    }  
6. })  

F12就可以看到打印结果:


图片1.png

以上就是可以滚动的情况,wrapperHeight(616) < scrollHeight(750),hasVerticalScroll为true;

那如果这些数据不对,检查是否dom没有更新完就初始化BScroll了,要等dom更新完才能初始化

四、wrapper样式

.wrapper元素上要给定位

position: absolute;
left: 0;
top: 0;
overflow: hidden;
width:100%;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,807评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • 谢谢作者的文章 非常喜欢 请允许收藏! 博客园首页博问闪存新随笔订阅管理 vue之better-scroll的封装...
    peng凯阅读 16,567评论 2 5
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,017评论 3 119
  • 文:怀瑾 大学时参加记者团 认识了几个热爱新闻事业的同学 于是有了那么一段写文的经历。 甚至萌发了成为一名记者的想...
    怀瑾2019阅读 360评论 0 0