页面停留按钮根据页面滚动显示和隐藏按钮

新建组件文件 shareBtn.vue

<template>
	<view class="fixed-icon-share">
		<button class="fixed-icon fixed_paidouyin" :class="isHidden?'fixed-icon-hidden':''" v-if="isShare"  type="default" open-type="share"
			data-channel="video" >
			<image src=""></image>
		</button>
	</view>
</template>
<script>
	let app = getApp();
	export default {
		name: "sharebtn",
		
		props:{
			
			isHidden:{
				type: Boolean,
				default: false
			}
		},	
	}
</script>
<style lang="scss" scoped>
	.fixed-icon{
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center; 
		padding: 0 !important;
		margin: 0 !important;
		background: none;
		border: 0;
		border-radius: 0;
		line-height: 1.5;
		z-index: 99999;
		width: 108rpx;
		height: 114rpx;
	}
	.fixed_paidouyin {
		bottom: 200rpx;
		right: -108rpx;
		animation: hidden .3s linear forwards;
		// transform: translateX(-116%);
		// transition: all .3s linear;
		&::after {
			border: 0;
			border-radius: 0;
		}
		image {
			width: 108rpx;
			height: 114rpx;
		}
	}
	.fixed-icon-hidden{
		right: 22rpx;
		animation: showing .3s linear forwards;
		// transform: translateX(84%);
		// transition: all .3s linear;
	}
	@keyframes hidden{
		0%{
			transform: translateX(0%);
		}
		100%{
			transform: translateX(-130rpx);
		}
	}
	@keyframes showing{
		0%{
			transform: translateX(0%);
		}
		100%{
			transform: translateX(116rpx);
		}
	}
</style>

引入组件使用

<template>
    <shareBtn :isHidden='isHidden'></shareBtn>
</template>
<script>
    import {debounce} from '@/common/common.js'
    export default {
	components: {
            shareBtn
	},
        data(){
            return{
               isHidden:false 
            }
        },
        onPageScroll(val) {
            var that = this
            this.isHidden = true
            console.log(debounce(),'debounce')
            debounce(function(){
                that.isHidden = false
                console.log(that,'that',that.isHidden)
            },500)
        }
</script>

debounce（防抖功能使用）common.js

//防抖
let timeout = null;
export function debounce(func, times = 500, immediate = false) {
    if (timeout !== null) clearTimeout(timeout);
    if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(function() {
            timeout = null;
        }, times);
        if (callNow) typeof func === 'function' && func();
    } else {
        timeout = setTimeout(function() {
            typeof func === 'function' && func();
        }, times);
    }
}