mobile-frame-h5-example/pages/componentsA/backTop/index.vue

<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-title">演示效果</view>
			<view class="u-demo-area">
				<view class="u-no-demo-here">滚动页面即可在右下角看到返回顶部的按钮</view>
			</view>
			<u-back-top :scrollTop="scrollTop" :mode="mode"
			:bottom="bottom" :right="right" :top="top" :icon="icon" :custom-style="customStyle"
			:icon-style="iconStyle" :tips="tips"
			>
			</u-back-top>
		</view>
		<view class="u-config-wrap">
			<view class="u-config-title u-border-bottom">
				参数配置
			</view>
			<view class="u-config-item">
				<view class="u-item-title">模式</view>
				<u-subsection :list="['圆形', '方形']" @change="modeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">组件位置</view>
				<u-subsection :list="['默认', '自定义']" @change="positionChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">显示组件的滚动条距离</view>
				<u-subsection current="1" :list="['200', '400', '600']" @change="scrollTopChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">自定义样式</view>
				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				mode: 'circle',
				bottom: 200,
				right: 40,
				top: 400,
				icon: 'arrow-upward',
				iconStyle: {
					color: '#909399',
					fontSize: '38rpx'
				},
				customStyle: {},
				tips: ''
			}
		},
		methods: {
			modeChange(index) {
				this.mode = !index ? 'circle' : 'square';
			},
			positionChange(index) {
				if(index == 0) {
					this.bottom = 200;
					this.right = 40;
				} else {
					this.bottom = 400;
					this.right = 80;
				}
			},
			scrollTopChange(index) {
				this.top = [200, 400, 600][index];
			},
			styleChange(index) {
				if(index == 0) {
					this.icon = 'arrow-up';
					this.iconStyle = {
						color: '#2979ff',
						fontSize: '34rpx'
					};
					this.customStyle = {
						backgroundColor: '#a0cfff',
						color: '#2979ff'
					};
					this.tips = '顶部';
				} else {
					this.icon = 'arrow-upward';
					this.iconStyle = {
						color: '#909399',
						fontSize: '38rpx'
					};
					this.customStyle = {};
					this.tips = '';
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.u-demo {
		height: 200vh;
	}
</style>