vue-sample-totop v1.0.5

vue-simple-totop

totop组件，适用于uni-app。

说明

项目说明 返回到首页，或顶部

使用

安装组件

  npm i vue-simple-totop

一、全局引入

// main.js 全局引入
import totop from 'vue-simple-totop';
Vue.component('totop',totop);

// template
<template>
  <view>
  
    //这里是你的页面内容...
    <totop @clear="clearListener" ref="totop" :isHome="true" :isTop="true"></totop>//注意 totop
  </view>
</template>

<script>

export default {
	data() {
	    return {
                   // you data
		    isListener: true
		};
	},
	// 滚动事件 监听
	onPageScroll(e) {
		const { scrollTop } = e;
		// 判断是否开始监听滚动事件
		if (this.isListener) {
			if (e.scrollTop >= 300) {
				this.$refs.totop.show();
			} else {
				this.$refs.totop.hide();
			}
		} else {
			if (e.scrollTop >= 300) {
				setTimeout(() => {
					this.isListener = true;
				}, 1000);
			}
		}
		//
	},
 }
</script>

说明

	isHome： 是否显示 主页按钮
    isTop: 是否显示 返回顶部按钮
    组件无法监听滚动事件。
	show() //显示 返回顶部按钮
    hide()  // 隐藏 返回顶部按钮
    @clear回调，清除滚动监听