caimei-applets-hehe/components/cm-module/scrollTop/scrollTop.vue

<template name="scrollTop">
	<!-- 商品详情价格判断 -->
	<view>
		<view class="scrollTop" :style="{bottom:bottom+'rpx'}" :class="isScrollTop ? 'show' : 'none'">
			<view class="icon top" @click="onPageScrollTop">
				<text class="iconfont icon-zhiding"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'ScrollTop',
		props:{
			bottom:{
				type:Number,
				default:100
			},
			isScrollTop:{
				type:Boolean,
				default:false
			},
			hideContact:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return{
				isPhone:false,
				telPhone:'0755-22907771',
				mobilePhone:'15338851365'
			}
		},
		created() {
			
		},
		methods:{
			onPageScrollTop(){
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 600
				})
			},
			handleContact(e){
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
		},		
	}
</script>

<style lang="scss">	
	.scrollTop{
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		right: 20rpx;
		z-index: 999;
		&.show{
			display: block;
		}
		&.none{
			display: none;
		}
		.icon{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			float: left;
			margin: 10rpx 0;
			line-height: 80rpx;
			text-align: center;
			.contact-btn{
				width: 80rpx;
				height: 80rpx;
				background-color: rgba(0,0,0,0);
				line-height: 80rpx;
				.iconfont{
					font-size: $font-size-44;
					color: #FFFFFF;
				}
			}
			&.top{
				background-color: rgba(25, 25, 25, 0.3);
			}
			.iconfont{
				font-size: $font-size-26;
				color: #FFFFFF;
			}
		}
	}
</style>