vue DOM实现使用 better-scroll 使用上下滚动，可实现局部滚动（个人实战）

 

1.安装 better-scroll

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

2.html结构需要符合要求(官方要求的结构)

<div class="wrapper" ref='wrapper'>  
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
    <!-- 如果使用DOM,可以不写 class="wrapper" 和 class="content"-->
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

3. sriper 部分 (这个是当进入页面后马上计算了高度的，当二次请求获取数据时，使用4 )

<script> 
import Bscroll from 'better-scroll'  //引入
export default {
  mounted() {
    this.$nextTick(() => {  //使用这个DOM方法
            this.scroll = new Bscroll(this.$refs.wrapper)
        })
    
      } 
  },
};
</script>

4.sriper 部分（二次获取数据，局部重新计算高度，让可以正常滑动）

<script>
import Bscroll from 'better-scroll'

export default {
  methods:{
    test(){ //这个是方法，按自己的来就行
    //获取数据的一些方法脚本
    
    //之后加上这个
    this.$nextTick(() => {
            this.scroll = new Bscroll(this.$refs.wrapper)
        })
    
      }
  }
  
};
</script>