vue实现下拉到不同位置改变导航背景色

效果图

 

src/components/scroll/index.vue

<template>
    <!-- 通过ref可以获取到dom对象 -->
    <swiper class="swiper" :options="swiperoption" ref="swiper">
      <div class="mine-scroll-pull-down">
          <me-loading :text="pulldowntext" inline ref="pulldownloading" />
      </div>
      <swiper-slide>
          <!-- 所有内容放在插槽里 -->
          <slot></slot>
      </swiper-slide>
      <div class="mine-scroll-pull-up">
          <me-loading :text="pulluptext" inline ref="pulluploading" />
      </div>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import { swiper, swiperslide } from 'vue-awesome-swiper';
  import 'swiper/css/swiper.css';
  import meloading from 'components/loading';

  export default {
    name: 'scrollbar',
    title: 'scrollbar',
    components: {
      swiper,
      swiperslide,
      meloading
    },
    data() {
      return {
        pulling:false,//是否正在下拉中
        pulldowntext:'向下拉动会重新加载幻灯片哦',
        pulluptext:'向上拉动会加载更多哦',
        swiperoption: {
          scrollbar: {
            el: '.swiper-scrollbar',
            hide: true
          },
          direction:'vertical',
          slidesperview:'auto',
          freemode:true,
          setwrappersize:true,
          on:{//下拉刷新时触发的事件
            slidermove:this.slidermove,//一开始使用slidermove，有bug
            touchend:this.touchend,
            transitionend:this.scrollend//滚动结束
          }
        },
      }
    },
    props:{
      recommends:{
        type:[array,object],
        default(){
          return [];
        }
      }
    },
    watch:{//当recommends值发生改变时
      recommends(){
        this.$refs.swiper && this.$refs.swiper.$swiper.update();//更新滚动条长度
      }
    },
    methods:{
      slidermove(){
        if(this.pulling) return;//正在下拉中，则不重复下拉

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

        this.$emit("scrolling",swiper.translate,swiper);

        if(swiper.translate>0){//向下拉
          if(swiper.translate>100){//超出规定的高度
            this.$refs.pulldownloading.settext("开始下拉...");
          }else{
            this.$refs.pulldownloading.settext("向下拉动会重新加载幻灯片哦");
          }
        }else if(swiper.isend){//上拉

          //是否达到上拉的触发条件
          //swiper的位移加上swiper的高度（617px）-50px的值如果大于当前内容高度
          //swiper.translate这个属性可以获取到wrapper的位移，其实可以理解为滚动条滚动的距离
          //swiper.height这个属性获取swiper容器的高度， 也就是显示区域的高度
          //50px是我们设置的一个值。为了让页面不是到达最低部的时候，可以提前加载内容
          //parseint(swiper.$wrapperel.css('height'))是wrapper的html元素的height属性， 也就是所有内容的高度
          const ispullup=math.abs(swiper.translate)+swiper.height-50 > parseint(swiper.$wrapperel.css('height'));

          if(ispullup){//开始上拉
            this.$refs.pulluploading.settext("开始上拉");
          }else{//保持初始化
            this.$refs.pulluploading.settext('向上拉动会加载更多哦');
          }
        }
      },
      touchend(){

        if(this.pulling) return;//正在下拉中，则不重复下拉

        const swiper=this.$refs.swiper.$swiper;
        
        if(swiper.translate>100){

          this.pulling=true;//正在下拉中

          swiper.allowtouchmove=false;//禁止触摸
          swiper.settransition(swiper.params.speed);//设置初始速度
          swiper.settranslate(100);//移动到设定的位置（拖动过度时回到设置的位置）
          swiper.params.virtualtranslate=true;//定住不给回弹
          this.$refs.pulldownloading.settext("正在下拉中...");//设置正在刷新中的文字
          this.$emit("pull-down",this.pulldownend);//触发消息，传递结束下拉的函数

        }else if(swiper.isend){//上拉
          //是否达到上拉的触发条件
          const ispullup=math.abs(swiper.translate)+swiper.height-30>parseint(swiper.$wrapperel.css('height'));

          if(ispullup){//开始上拉
            
            this.pulling=true;

            swiper.allowtouchmove=false;//禁止触摸
            swiper.settransition(swiper.params.speed);//设置初始速度
            swiper.settranslate(-(parseint(swiper.$wrapperel.css('height'))+50-swiper.height));//超过拉动距离时回弹
            swiper.params.virtualtranslate=true;//定住不给回弹
            this.$refs.pulluploading.settext("正在上拉中...");//设置正在刷新中的文字
            this.$emit("pull-up",this.pullupend);//触发消息，传递结束下拉的函数

          }
        }
      },
      pulldownend(){
        const swiper=this.$refs.swiper.$swiper;

        this.pulling=false;//下拉结束

        this.$refs.pulldownloading.settext("下拉结束");//设置加载结束后的文字
        swiper.allowtouchmove=true;//可以触摸
        swiper.settransition(swiper.params.speed);//设置初始速度           
        swiper.params.virtualtranslate=false;//可以回弹
        swiper.settranslate(0);//移动到最初的位置

        //动画完成后再触发结束事件
        settimeout(()=>{
          this.$emit("pulldown-end");
        },swiper.params.speed);
       
      },
      pullupend(){
        const swiper=this.$refs.swiper.$swiper;

        this.pulling=false;

        this.$refs.pulluploading.settext("上拉结束");//设置加载结束后的文字
        swiper.allowtouchmove=true;//可以触摸           
        swiper.params.virtualtranslate=false;//可以回弹
      },
      scrolltop(){
        this.$refs.swiper.$swiper.slideto(0);//回到顶部
      },
      scrollend(){
        this.$emit("scroll-end",this.$refs.swiper.$swiper.translate,this.$refs.swiper.$swiper,this.pulling);
      }
    }
  }
</script>

<style lang="scss" scoped>
    .swiper-container{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    .swiper-slide{
      height:auto;
    }
    .mine-scroll-pull-down{
        position:absolute;
        left:0;
        bottom:100%;
        width:100%;
        height:80px;
    }
    .mine-scroll-pull-up{
        position:absolute;
        left:0;
        top:100%;
        width:100%;
        height:30px;
    }
</style>

 

src/pages/home/index.vue

<template>
    <div class="home">
        <div class="g-header-container">
            <home-header :class="{'header-transition':headertransition}" ref="header"/>
        </div>
        <scrollbar :data="recommends" @pull-down="pullrefresh" @pull-up="loadmore" @scroll-end="scrollend" ref="scroll" @scrolling="changeheader">
            <slider ref="myswiper" />
            <home-nav />
            <!-- 热门推荐加载完成后更新滚动条 -->
            <recommend @loaded="updatescroll" ref="recommend" />
        </scrollbar>
        <div class="g-backtop-container">
            <me-backtop :visible="backtopvisible" @backtop="backtop" />
        </div>
        <!-- 该页面自己的子路由 -->
        <router-view></router-view>
    </div>

</template>

<script>
import slider from 'components/slider';
import scrollbar from 'components/scroll';
import homenav from './nav';
import recommend from './recommend';
import mebacktop from 'components/backtop';
import homeheader from './header';

export default {
    name:"home",
    components:{
        slider,   
        scrollbar,
        homenav,
        recommend,
        mebacktop,
        homeheader   
    },
    data(){
        return{
            recommends:[],
            backtopvisible:false,
            headertransition:false
        }
    },
    methods:{
        updatescroll(recommends){
            this.recommends=recommends;
        },
        pullrefresh(end){//刷新轮播图
            this.$refs.myswiper.getsliders().then(end);
        },
        loadmore(end){//加载更多
            this.$refs.recommend.getrecommends().then(end).catch(err=>{
                if(err){//没有更多图片了
                    console.log(err);
                }
                end();
            });
        },
        scrollend(translate,swiper,pulling){//下拉刷新结束
            //显示回到顶部按钮
            this.backtopvisible=translate<0 && -translate>swiper.height;//向下拉并且距离大于一屏
            if(!pulling){
                this.changeheader(translate,swiper);
            }
           
        },
        backtop(){
            this.$refs.scroll && this.$refs.scroll.scrolltop();//回到顶部
        },
        changeheader(translate,swiper){//修改头部导航背景色
            if(translate>0){//下拉中，隐藏导航
                this.$refs.header.hide();
                return;
            }else{
                this.$refs.header.show();
                this.headertransition=-translate>200;//大于200时返回true，改变导航背景色
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    .home{
        width:100%;
        height:100%;
    }
    .g-header-container{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        z-index:999;
        height:50px;
    }
    .g-backtop-container{
        position: absolute;
        z-index:1100;
        right:10px;
        bottom:60px;
    }
</style>

 

src/pages/home/header.vue

<template>
    <div class="header" v-show="headervisible">
        <i class="iconfont icon-scan header-left"></i>
        <div class="headerr-center">搜索框</div>
        <i class="iconfont icon-msg header-right"></i>
    </div>
</template>

<script>
export default {
    name:"homeheader",
    data(){
        return{
           headervisible:true
        }
    },
    methods:{
        show(){
            this.headervisible=true;
        },
        hide(){
            this.headervisible=false;
        }
    }
}
</script>

<style lang="scss" scoped>
    .header{
        background:transparent;
        transition:background-color 0.5s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:5px 20px;

        .iconfont{
            font-size:24px;
            color:#fff;
        }

        //下拉到一定位置，添加.header-transition，使导航背景色变红
        &.header-transition{
            background-color:rgba(222, 24, 27, 0.9);
        } 

        .headerr-center{
            flex:1;
        }
    }     
</style>