better-scroll滚动无效 几种原因和上拉刷新方式

image.png

不了解better-scroll是什么的请点击这里https://www.jianshu.com/p/9ebc25daf712 查看

1,DOM层级关系

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

2,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中的元素将不能滚动

3,content是否被成功添加滚动相关style

以此dom结构为例：

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

审查元素可以看到：

image.png

这样即添加成功的

4,wrapper 与 content 高度问题

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

this.$nextTick(() => {
    if (!this.scroll) {
    this.scroll = new BScroll(this.$refs.wrapper, {})
    console.log(this.scroll)
    }
 })

F12就可以看到打印结果：

image.png

以上就是可以滚动的情况，wrapperHeight(616) < scrollHeight(750)，hasVerticalScroll为true；
那如果这些数据不对，检查是否dom没有更新完就初始化BScroll了，要等dom更新完才能初始化

5,wrapper样式

.wrapper元素上要给定位

这一点最坑了 我这一个样式用scss写的时候，层级关系出错了 找了很久才发现错误，简直要怀疑人生...

position: absolute;
left: 0;
top: 0;
overflow: hidden;

原文网址 ：https://blog.csdn.net/qiqi_77_/article/details/79361413

better-scroll实现下拉刷新、上拉加载更多（巨简单...）https://blog.csdn.net/Take_Dream_as_Horse/article/details/70953536

vuex namespaced的作用以及使用方式 （以后试试）

image.png

https://blog.csdn.net/liguanjie8/article/details/80366091

移动端因软键盘的原因，固定在页面底部的按钮被弹起解决方案https://blog.csdn.net/qq_33599109/article/details/79086411