这是backtop的代码

<template>

<transition name="mine-backtop">

<a

href=""

class="mine-backtop"

v-show="visible"

@click="backToTop"

>

<i class="iconfont icon-backtop"></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 leave

&-enter-active,

&-leave-active {

transition: opacity 0.4s;

}

&-enter,

&-leave-to{

opacity: 0;

}

}

</style>

这是home页面index.vue的代码

<template>

<div class="home">

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

<home-header :class="{'header-transition':isHeaderTransition}" ref="header"/>

</header>

<me-scroll :data="recommends"

pullDown

pullUp

@pull-down="pullToRefresh"

@pull-up="pullToLoadMore"

@scroll-end="scrollEnd"

@scroll="scroll"

@pull-down-transition-end="pullDownTransitionEnd"

ref="scroll"

>

<!-- 来监听一下pull-down事件 -->

<home-slider ref="slider"></home-slider>

<HomeNav></HomeNav>

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

</me-scroll>

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

<MeBacktop :visible="isBacktopVisible" @backtop="backToTop"/>

</div>

<router-view></router-view>

</div>

</template>

<script>

import HomeNav from './nav';

import MeScroll from 'base/scroll';

import MeBacktop from 'base/backtop';

import HomeHeader from './header';

import HomeSlider from './slider';

import HomeRecommend from './recommend';

import {HEADER_TRANSITION_HEIGHT} from './config';

export default {

name:'Home',

components:{

HomeHeader,

HomeSlider,

MeScroll,

HomeNav,

HomeRecommend,

MeBacktop

},

data(){//处理滚动条 需要一个值来接收

return{

recommends: [],

isBacktopVisible:false, //默认是false

isHeaderTransition: false

}

},

// created(){

//     setTimeout(() =>{

//      this.isBacktopVisible = true;

//     },1000);

// },

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).catch(err => {

if(err){

console.log(err);

}

console.log('上啦刷新');

end();

});

//成功的时候用 this.$refs.recommend.update().then(end);

// setTimeout(() =>{

//   console.log('上啦刷新');

//   end();

// },1000);

},

scroll(translate){ //监听一下,吧translate传进去

this.changeHeaderStatus(translate);

},

scrollEnd(translate,scroll,pulling){

if(!pulling){  //如果pulling不存在的时候就执行 this.changeHeaderStatus(translate);

this.changeHeaderStatus(translate);

}

//   console.log(translate)

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

//如果条件满足了就是真，否则就是假

},

pullDownTransitionEnd(){

this.$refs.header.show()  //下拉加载完后出现header

},

backToTop() {

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

},

changeHeaderStatus(translate){

if(translate > 0){ //表示正在上啦

this.$refs.header.hide();

return;

}

this.$refs.header.show();

this.isHeaderTransition = -translate > HEADER_TRANSITION_HEIGHT

}

}

}

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

.home{

overflow: hidden;

width: 100%;

height: 100%;

background-color: $bgc-theme;

}

</style>

这是scroll的代码

<template>

<swiper :options="swiperOption" ref="swiper">

<div class="mine-scroll-pull-down" v-if="pullDown">

<MeLoading :text="pullDownText" inline ref="pullDownLoading"/>

</div>

<!-- 下拉 -->

<swiper-slide>

<slot></slot>

</swiper-slide>

<!-- 上拉 -->

<div class="mine-scroll-pull-up" v-if="pullUp">

<me-loading :text="pullUpText" inline ref="pullUpLoading"/>

</div>

<div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>

</swiper>

</template>

<script>

import { swiper, swiperSlide } from "vue-awesome-swiper";

import MeLoading from "base/loading";

import {

PULL_DOWN_HEIGHT,

PULL_DOWN_TEXT_INIT,

PULL_DOWN_TEXT_START,

PULL_DOWN_TEXT_ING,

PULL_DOWN_TEXT_END,

PULL_UP_HEIGHT,

PULL_UP_TEXT_INIT,

PULL_UP_TEXT_START,

PULL_UP_TEXT_ING,

PULL_UP_TEXT_END

} from './config';

export default {

name: "MeScroll",

components: {

swiper,

swiperSlide,

MeLoading

},

props: {

scrollbar: {

type: Boolean,

default: true

},

data: {

//传输scroll的值，可以将data改为别的名字，跟下面不一样

type: [Array, Object]

},

//下拉接收的参数

pullDown:{

type:Boolean,

default:false

},

//上啦接收的参数

pullUp:{

type:Boolean,

default:false

}

},

data() {

return {

};

},

watch: {

data() {

//监听一下data的变化

this.update();

}

},

created(){

this.init();

},

methods: {

update() {

this.$refs.swiper && this.$refs.swiper.swiper.update();

},

scrollToTop(speed,runCallbacks){

this.$refs.swiper && this.$refs.swiper.swiper.slideTo(0,speed,runCallbacks);

},

init(){

this.pulling= false,//是否正在下拉或者上啦，默认给false 没有

this.pullDownText= PULL_DOWN_TEXT_INIT,

this.pullUpText= PULL_DOWN_TEXT_INIT,

this.swiperOption= {

direction: "vertical",

slidesPerView: "auto", //1页里面能看见几张图片，让他自适应

freeMode: true,

setWrapperSize: true, //自适应一共的高度

scrollbar: {

el: this.scrollbar ? ".swiper-scrollbar" : null,

hide: true //是否自动隐藏

},

on:{

sliderMove: this.scroll,

touchEnd:this.touchEnd, //下拉或者松手刷新。swiper提供的

transitionEnd: this.scrollEnd

}

}

},

scroll(){

const swiper = this.$refs.swiper.swiper; //前面this.$refs.swiper是找到这个组件，后面.swiper是找到这个实例化对象

if(this.pulling){ //如果为真就表示在下拉或者上啦 直接返回

return;

}

if(swiper.translate>0){

//下拉

if(!this.pullDown)//判断一下用户是否下拉

{

return;

}

if (swiper.translate > PULL_DOWN_HEIGHT) {

//判断大于这个高度

this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_START);

}else {

this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_INIT);

}

}

else if (swiper.isEnd) { // 上拉

if (!this.pullUp) {

return;

}

const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > parseInt(swiper.$wrapperEl.css('height'));

if (isPullUp) {

this.$refs.pullUpLoading.setText(PULL_UP_TEXT_START);

} else {

this.$refs.pullUpLoading.setText(PULL_UP_TEXT_INIT);

}

}

},

scrollEnd(){

this.$emit('scroll-end', this.$refs.swiper.swiper.translate, this.$refs.swiper.swiper, this.pulling);

},

touchEnd(){

if(this.pulling){

return

}

const swiper = this.$refs.swiper.swiper;

this.$emit('scroll', swiper.translate, this.$refs.swiper.swiper);

if(swiper.translate > PULL_DOWN_HEIGHT){  //松手的时候是否超过了这个限定的高度

if(!this.pullDown){ //如果都没开始下拉就直接返回

return;

}

this.pulling = true;

//开始下拉怎么办

swiper.allowTouchMove = false;// 禁止触摸

swiper.setTransition(swiper.params.speed);//找到初始的速度

swiper.setTranslate(PULL_DOWN_HEIGHT);

swiper.params.virtualTranslate = true;// 定住不给回弹

this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_ING);//变成正在刷新的文字

this.$emit('pull-down',this.pullDownEnd); //将到回复到原值pullDownEnd

}

else if (swiper.isEnd) { // 底部

const totalHeight = parseInt(swiper.$wrapperEl.css('height'));

const isPullUp = Math.abs(swiper.translate) + swiper.height - PULL_UP_HEIGHT > totalHeight;

if (isPullUp) { // 上拉

if (!this.pullUp) {

return;

}

this.pulling = true;

swiper.allowTouchMove = false; // 禁止触摸

swiper.setTransition(swiper.params.speed);

swiper.setTranslate(-(totalHeight + PULL_UP_HEIGHT - swiper.height));

swiper.params.virtualTranslate = true; // 定住不给回弹

this.$refs.pullUpLoading.setText(PULL_UP_TEXT_ING);

this.$emit('pull-up', this.pullUpEnd);

}

}

},

pullDownEnd(){

if(!this.pullDown)//判断一下用户是否下拉

{

return;

}

const swiper = this.$refs.swiper.swiper;

this.pulling = false;

this.$refs.pullDownLoading.setText(PULL_DOWN_TEXT_END);

swiper.params.virtualTranslate = false; //可以回弹

swiper.allowTouchMove = true;//可以触摸

swiper.setTransition(swiper.params.speed);

swiper.setTranslate(0);//回到0的位置

setTimeout(() => {

this.$emit('pull-down-transition-end');

},swiper.params.speed);

},

pullUpEnd() {//上啦

const swiper = this.$refs.swiper.swiper;

this.pulling = false;

this.$refs.pullUpLoading.setText(PULL_UP_TEXT_END);

swiper.params.virtualTranslate = false;

swiper.allowTouchMove = true;

}

}

};

</script>

<style lang="scss" scoped>

.swiper-container {

overflow: hidden;

width: 100%;

height: 100%;

};

.swiper-slide {

height: auto;

}

.mine-scroll-pull-up,

.mine-scroll-pull-down {

position: absolute;

left: 0;

width: 100%;

}

.mine-scroll-pull-down {

bottom: 100%;

height: 80px;

}

.mine-scroll-pull-up {

top: 100%;

height: 30px;

}

</style>