betterScroll滚动遇到图片，滚动位置不对

正常情况下页面获取数据后执行this.$nextTick(）进行刷新就可以了。但是有时候页面上会有图片，导致还没有滚动到底部就不滚动了，刚开始还以为是自己代码写错了，检查了半天，也没发现代码的问题，最后网上找了挺多办法，才发现，图片则是异步加载的，总是在页面其他数据显示之后才出来。也就是说：

scrollerHeight属性是根据在Better-Scroll的content中的子组件的高度

但在我们的首页中，刚开始计算 scrollerHeight 属性时，是没有将图片的高度计算在内的。

所以计算出来的结果是错误的。

后来加载进来的图片使得有了新的高度，但是 scrollerHeight 属性并没有更新。
所以滚动出了问题。

所以最后计算的高度就少了图片的高度，导致没有滚动到底就进行加载了

解决办法就是

给图片添加@load方法，使图片能够在加载出来以后，在进行刷新，计算高度，并滚动。

以下先是没有图片问题的滚动，基于这个基础，再解决有图片问题的滚动

1、先安装better-scroll，然后引入brtter-scroll

npm install better-scroll --save

import BScroll from 'better-scroll'

2、data里面需要定义滚动的变量：

data () {
    return {
      aboutScroll: null
    }
  },

3、需要滚动的内容要包含在一个大的div下，表示是这个div在滚动（个人理解），像这样的格式

<div ref="content">
    <div>
      <p>滚动的内容1</p>
      <p>滚动的内容2</p>
      <p>滚动的内容3</p>
      <p>滚动的内容4</p>
    </div>
  </div>

4、需要css定义滚动的高度，超过这个高度进行隐藏，往下滑动才会出来。像这样：红框内表示滚动的高度

 /*文本div*/
  .contentInfo{
    background-color: #fff;
    color: #3c3c3c;
    overflow: hidden;
    height: calc(100% - 52px);
  }

5、定义滚动的方法：

 init () {
      this.$nextTick(() => {
        this.aboutScroll = new BScroll(this.$refs.content, {
          click: true
        })
      })
    }

6、在页面初始化的时候，执行init（）方法

mounted () {
  this.init()
},

以上是简单的使用better-scroll滚动，下面是对于存在图片，还未滑到底部，便不滚动了的问题

这个原因是因为，图片是异步加载，刚开始执行init()方法时，img还未加载，以至于高度并没有计算到这个图片的高度，所以出现这个问题，

此时需要在img标签上添加@load方法，并在此methods：中定义方法声明，加载好图片后，刷新高度滚动。

代码如下：

  <p>1、滚动标题:</p>
  <p>滚动内容1</p>
  <div class="imgInfo one">
    <img src="../assets/img/图1.png" alt="" @load="gotoLoad()">
  </div>
  <p>2、滚动标题2:</p>
  <p>滚动内容2</p>
  <div class="imgInfo two">
    <img src="../assets/img/图2.png" alt="" @load="gotoLoad()">
  </div>

gotoLoad () {
      this.aboutScroll && this.aboutScroll.refresh()
    },

到此，对于图片的滚动就解决了，但是移动端滚动时，会出现到底，然后弹跳下，找了一圈发现：

是因为滚动到底部的弹跳机制没有去掉，需要在init（）方法中定义的时候声明：

init () {
      this.$nextTick(() => {
        this.aboutScroll = new BScroll(this.$refs.content, {
          click: true,
          bounce: false
        })
      })
    }

到此，问题就解决了~~~，有更好的办法，欢迎指正哈

betterScroll滚动遇到图片，滚动位置不对

Guess you like