526互联

vue实现一个右侧悬浮工具栏

发布时间 2023-09-08 14:52:29作者: 妞妞猪

最近在写商城时需要用到一个右侧悬浮的工具栏，并把这个写成了控件 ，刚开始是想要使用elementui自带的backtop组件的，无奈能力有限，不能改造成多列的结果，所以就只能自己写一个了

这个控件实现的功能为，一开始只有3个内容，当页面下滑后会多出一个回到顶部的内容，并使用定时器连贯的回到顶部

注意：这里需要用到elementui，请去按照官网 https://element.eleme.cn/#/zh-CN/component/quickstart 的说明去进行插件的安装

html部分

<template>
    <div :class="tops?'navbar':'navbar-top'">
        <el-tooltip class="item" effect="dark" content="购物车" placement="left">
            <el-badge :value="12" class="item">
                <a><i class="el-icon-shopping-cart-2"></i></a>
            </el-badge>  
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="客服" placement="left">
            <a><i class="el-icon-service"></i></a>
        </el-tooltip>
        <div class="qrShow right" v-if="showQR">
            <el-image
                style="width: 100px; height: 100px;border-radius: 8px;"
                src="static/img/rightBar/qrcode.jpg"
                fit="cover">
            </el-image>
        </div>
        <a @mouseover="showQRCode" @mouseleave="hideQRCode"><i class="el-icon-full-screen"></i></a>
        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left" v-if="tops">
            <a @click="gotop"><i class="el-icon-caret-top"></i>
            <br>
            <span>顶部</span></a>
        </el-tooltip>
    </div>
</template>
script部分
<script>
export default {
  name: 'RightBar',
  data () {
    return {
        showQR:false,
        tops:false,
        heights:window.innerHeight,
        scrolltop:'',
    };
  },
  mounted(){
        window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
  },
  methods:{
    showQRCode(){//显示二维码
        this.showQR = true
    },
    hideQRCode(){//隐藏二维码
        this.showQR = false
    },
    scrollToTop () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.scrolltop = scrollTop
        if (parseInt(this.scrolltop) > (parseInt(this.heights) / 3)) {
            this.tops = true
        } else {
            this.tops = false
        }
    },
    gotop () {
        let timer = setInterval(() => {
            document.documentElement.scrollTop = document.body.scrollTop = this.scrolltop - 90
            if (this.scrolltop === 0) {
                clearInterval(timer)
            }
        }, 15)
    },
  }
}
</script>
style部分
<style scoped>
.navbar {
    text-align: center;
    background-color: white;
    position: fixed;
    top: 68%;
    right: 2%;
    width: 55px;
    height: 220px;
    z-index: 999;
    border-radius: 10px;
}
.navbar-top{
    text-align: center;
    background-color: white;
    position: fixed;
    top: 68%;
    right: 2%;
    width: 55px;
    height: 165px;
    z-index: 999;
    border-radius: 10px;
}
.navbar a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    width: 100%;
    height: 55px;
    display: block;
    font-size: 30px;
    padding-top: 5px;
}
.navbar a:last-child{
    color: rgb(0, 0, 0);
    text-decoration: none;
    width: 100%;
    height: 55px;
    display: block;
    font-size: 15px;
    border-radius: 0px 0px 10px 10px;
}
.navbar a:first-child{
    color: rgb(0, 0, 0);
    text-decoration: none;
    width: 55px;
    height: 55px;
    display: block;
    font-size: 30px;
    border-radius: 10px 10px 0px 0px;
}
.navbar a:hover {
    background-color: #d9534f;
    color: white;
}
.navbar-top a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    width: 100%;
    height: 55px;
    display: block;
    font-size: 30px;
    padding-top: 5px;
}
.navbar-top a:last-child{
    color: rgb(0, 0, 0);
    text-decoration: none;
    width: 100%;
    height: 55px;
    display: block;
    font-size: 30px;
    border-radius: 0px 0px 10px 10px;
}
.navbar-top a:first-child{
    color: rgb(0, 0, 0);
    text-decoration: none;
    width: 55px;
    height: 55px;
    display: block;
    font-size: 30px;
    border-radius: 10px 10px 0px 0px;
}
.navbar-top a:hover {
    background-color: #d9534f;
    color: white;
}
.qrShow{
    position: fixed;
    top: calc(68% + 80px);
    right: calc(3% + 60px);
    z-index: 999;
    background-color: rgb(179, 179, 179);
    width: 110px;
    height: 110px;
    color: white;
    text-align: center;
    border-radius: 10px;
    font-family: sans-serif;
    padding-top: 5px;
}
.qrShow:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid;
}
.right:after {
    border-left-color: rgb(179, 179, 179);
    left: 100%;
    top: 50%;
    margin-top: -7px;
}
</style>

 参考 https://codeantenna.com/a/TNSQheu4p4

https://www.zhihu.com/question/590523108/answer/2961076966