backtop的index

<template>

  <transition name="mine-backtop">

    <a

      href=""

      class="mine-backtop"

      v-show="visible"

      @click="backToTop" >

      <i class="iconfont icon-huo"></i>

    </a>

  </transition>

</template>

<script>

export default {

  name: 'MeBacktop',

  props: {

    visible: {

      type: Boolean,

      default: false

    }

  },

  methods: {

    backToTop () {

      this.$emit('backtop')

    }

  }

}

</script>

<style lang="scss" scoped>

  @import "~assets/scss/mixins";

  .mine-backtop {

    overflow: hidden;

    @include flex-center();

    width: 45px;

    height: 45px;

    background-color: rgba(0, 0, 0, 0.6);

    border: none;

    border-radius: 50%;

    .iconfont {

      color: #fff;

      font-size: 38px;

    }

  }

  .mine-backtop {

    &-enter-active,

    &-leave-active {

      transition: opacity 0.4s;

    }

    &-enter,

    &-leave-to {

      opacity: 0;

    }

  }

</style>

home的index

<template>

    <div class="home">

        <header class="g-header-container">

            <home-header/>

        </header>

        <me-scroll

          :data="recommends"

          pullDown

          pullUp

          @pull-down="pullToRefresh"

          @pull-up="pullToLoadMore"

          @scroll-end="scrollEnd"

          ref="scroll"

        >

            <home-slider ref="slider"/>

            <home-nav/>

            <home-recommend @loaded="getRecommends" ref="recommend"/>

        </me-scroll>

        <div class="g-backtop-container">

          <me-backtop :visible="isBacktopVisible" @backtop="backToTop"/>

        </div>

        <router-view></router-view>

    </div>

</template>

<script>

import HomeHeader from './header'

import HomeSlider from './slider'

import MeScroll from 'base/scroll'

import HomeNav from './nav'

import HomeRecommend from './recommend'

import MeBacktop from 'base/backtop'

export default {

  name: 'Home',

  components: {

    HomeHeader,

    HomeSlider,

    MeScroll,

    HomeNav,

    HomeRecommend,

    MeBacktop

  },

  data () {

    return {

      recommends: [],

      isBacktopVisible: false

    }

  },

  methods: {

    updateScroll () {

    },

    getRecommends (recommends) {

      this.recommends = recommends

    },

    pullToRefresh (end) {

      this.$refs.slider.update().then(end)

      // setTimeout(() => {

      //     console.log('刷新')

      //     end()

      // }, 1000)

    },

    pullToLoadMore (end) {

      this.$refs.recommend.update().then(end)

      // setTimeout(() => {

      //     console.log('上拉的刷新')

      //     end()

      // }, 1000)

    },

    scrollEnd (translate, scroll) {

      this.isBacktopVisible = translate < 0 && -translate > scroll.height

    },

    backToTop () {

      this.$refs.scroll && this.$refs.scroll.scrollToTop()

    }

  }

}

</script>

<style lang="scss" scoped>

    @import '~assets/scss/mixins';

    .home{

        overflow: hidden;

        width: 100%;

        height: 100%;

        background-color: $bgc-theme;

    }

</style>