vue实现下拉到不同位置改变导航背景色
程序员文章站
2022-07-02 10:25:17
效果图 src/components/scroll/index.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>
上一篇： 电子秤
下一篇： 下面条用冷水还是热水