数据加载后的部分better-scroll无效... 遇到的new---知识点

数据加载后的部分better-scroll无效...   遇到的new---知识点

代码需要遵循的结构：

<div class="list" ref="wrapper" >
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">鲜芋</div>
          </div>
        </div>
      </div>
    </div>
</div>

better-scroll git地址：https://github.com/ustbhuangyi/better-scroll

按照上面的install标题里面的步骤进行了安装，

然后开始使用。

按照上面的实例首先需要导入

import BetterScroll from 'better-scroll'
然后在页面加载的时候进行betterscroll的初始化：

let bs = new BetterScroll('.wrapper', {
  movable: true,
  zoom: true
})

当然同时我又加了两个参数：

this.scroll = new BScroll(this.$refs.wrapper,{

click:true,

pullUpload:true

});

当然。wrapper换成了最上面的ref形式this.$refs.wrapper

这样就能正常scroll 啦

重点：

这里我需要页面中的内容是从网上下拉下来的信息。

于是就在motheds方法中进行了下拉，并且进行了赋值（这一块就不再进行说明了，相信初学者也都会哈。。。。。）

结果：

结果下拉下来的数据填充进去后，这部分数据无效。 

结合在unity开发的经验，肯定是scroll的滚动总height没把它算进去。

那就需要在数据加载后主动告诉scroll去重新计算这个值。做了这样的处理

：

  updated()
    {
      this.scroll.refresh();
    }

update 执行节点： 页面首次渲染， 数据更新。  我猜测首次渲染时scroll 进行了计算，数据更新时木有  。  废话不多说。  长知识啦！！！

 

note1:

刚看了一下better-scroll 的api ：  https://better-scroll.github.io/docs/en-US/guide/base-scroll-api.html#properties

里面有关于refresh()这个方法这样的解释：

Usage: recalculate BetterScroll to ensure scroll work properly when the structure of DOM changes.

ku!