封装backtop组件

点击回到顶部

<template>
  <img src="../../assets/img/top/top.jpg" alt="" class="top">
</template>

<script>
export default {
name:"backtop",
       
}
</script>

<style>
   .top{
       height: 30px;
       width:  30px;
       position: fixed;
         bottom: 70px;
       right: 20px;
       z-index: 1000;
       border-radius: 3px;
   }
</style>

<template>
  <div class="wrap" ref="myscroll">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  name: "scroll",
  data() {
    return {
      scroll: null,
    };
  },
  props:{
    probeType:{
        type:Number,
        default:0
    }
  },
  components: {
    Bscroll,
  },
  mounted() {
    setTimeout(() => {
      console.log("sss");
      this.scroll = new Bscroll(this.$refs.myscroll, {
        click: true,
       probeType:this.probeType
});
      this.scroll.on("scroll",(position)=>{
        this.$emit("slposition",position)
      })
    }, 1000);
  },
  methods:{
     back(x,y,time=300){
      this.scroll.scrollTo(x,y,time)
        
     }
  }
};
</script>

<style>
.wrap {
  overflow: hidden;
  touch-action: none;
position:relative;
}


</style>

创建backtop组件并在home页面引用给backtop标签设置组件的点击事件
要加native属性


利用better-scroll里面的probeType的设置为来获取滚动的位置，然后利用v-show="变量"判断变量的值为真或者是假来控制组件的显示

输出position参数