better-scroll使用

1.安装npm install better-scroll@1.13.2 --save
2.封装组件scroll

<template>
<div class="wrapper" ref="wrapper">
  <div class="content">
    <slot></slot>
  </div>

</div>
</template>

<script>
import  BScroll from 'better-scroll'
export default {
  name: "Scroll",
  data(){
    return{
      scroll:null
    }
  },
  //可点击
  mounted() {
    this.scroll=new BScroll(this.$refs.wrapper,{
      click:true

    })
  }
}
</script>

<style scoped>

</style>

3.在其他页面中使用

<template>
  <div class="detail">
    <detail-nav-bar class="top-nav"></detail-nav-bar>
    <scroll class="content">
    <detail-swiper :top-img="topImg"></detail-swiper>
    </scroll>
  </div>
</template>

<script>
import DetailNavBar from "@/views/detail/childComps/DetailNavBar";
import {getDetail} from "@/network/detail";
import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
import Scroll from "@/components/common/scroll/Scroll";

export default {
  name: "Detail",
  components: {Scroll, DetailSwiper, DetailNavBar},
  data(){
    return{
      iid: null,
      topImg: []
    }
  },
  created() {
    this.iid = this.$route.params.iid

    getDetail(this.iid).then(res=>{
      console.log(res)
      this.topImg=res.data.result.itemInfo.topImages
    })
  }

}
</script>

<style scoped>
.detail{
  position: relative;
  height: 100vh;
  z-index: 3;
  background-color: #ffffff;
}
.top-nav{
position: relative;
  z-index: 4;
  background-color: #ffffff;
}
.content{
  height: calc(100% - 44px);

}
</style>