|
|
@@ -15,15 +15,40 @@
|
|
|
<i :class="activeType=='user'?'iconfont icon-icon':'iconfont icon-wo'"></i><p>我</p>
|
|
|
</nuxt-link>
|
|
|
</span>
|
|
|
+ <a @click="toTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import { scrollTo } from '~utils/scroll'
|
|
|
export default{
|
|
|
name: 'MobileFooter',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ hideToTop: true
|
|
|
+ }
|
|
|
+ },
|
|
|
computed: {
|
|
|
activeType () {
|
|
|
return this.$route.path === '/' ? 'home' : this.$route.path === '/mobile/shop' ? 'shops' : this.$route.path === '/mobile/user' ? 'user' : ''
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ this.$nextTick(function () {
|
|
|
+ window.addEventListener('scroll', this.onScroll)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onScroll () {
|
|
|
+ let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
|
|
|
+ if (scrolled > 0) {
|
|
|
+ this.hideToTop = false
|
|
|
+ } else {
|
|
|
+ this.hideToTop = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toTop () {
|
|
|
+ scrollTo('body', 300)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -60,4 +85,18 @@
|
|
|
.mobile-footer span.active a{
|
|
|
color:#3976f4;
|
|
|
}
|
|
|
+ .mobile-footer >a {
|
|
|
+ position: absolute;
|
|
|
+ right: .1rem;
|
|
|
+ top: -1rem;
|
|
|
+ background: #3e82f5;
|
|
|
+ color: #fff;
|
|
|
+ width: .88rem;
|
|
|
+ height: .88rem;
|
|
|
+ line-height: .88rem;
|
|
|
+ border-radius: .05rem;
|
|
|
+ }
|
|
|
+ .mobile-footer >a i{
|
|
|
+ font-size: .46rem;
|
|
|
+ }
|
|
|
</style>
|