“优选”页面添加回到顶部按钮~

王强
1 parent f5fccceb
Showing 3 changed files with 78 additions and 2 deletions
src/components/gotoTop/gotoTop.less
src/components/gotoTop/gotoTop.vue
src/pages/optimization/optimization.vue
+@charset "UTF-8";
+
+.goto-top {
+    position: fixed;
+    right: 32px;
+    bottom: 32px;
+    z-index: 100;
+    width: 80px;
+    height: 80px;
+    .goto-top-img {
+        display: block;
+        width: 80px;
+        height: 80px;
+    }
+}
 \ No newline at end of file
+<template>
+	<div class="goto-top" @click="gotoTop" v-show="isShow || top == '0'">
+		<img src="static/img/icon_goto_top.png" class="goto-top-img" />
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isShow: false
+			};
+		},
+		props: {
+			top: {
+				type: Number,
+				default: 100
+			}
+
+		},
+		methods: {
+
+			/**
+			 * 切换标签
+			 */
+			gotoTop() {
+				document.documentElement.scrollTop = document.body.scrollTop = 0;
+			},
+
+			scrollEventListener() {
+				if ((document.documentElement.scrollTop || document.body.scrollTop) >= this.top) {
+					this.$set(this, "isShow", true);
+				} else {
+					this.$set(this, "isShow", false);
+				}
+			}
+		},
+		mounted() {
+
+			// 监听滚动条位置
+			window.addEventListener("scroll", this.scrollEventListener);
+		},
+		beforeDestroy() {
+
+			// 取消监听滚动条
+			window.removeEventListener("scroll", this.scrollEventListener);
+		}
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+	@import './gotoTop';
+</style>
@@ -144,10 +144,15 @@
-                    
+
                 </div>
             </div>
         <!-- </van-pull-refresh> -->
+
+        <!-- 回到顶部按钮 -->
+        <goto-top
+            :top="parseInt(150)">
+        </goto-top>
     </div>
 </template>
@@ -162,6 +167,7 @@
     import horizListFlex from "@/components/horizListFlex/horizListFlex";
     import textTitleBox from "@/components/textTitleBox/textTitleBox";
     import columnListBox from "@/components/columnListBox/columnListBox";
+    import gotoTop from "@/components/gotoTop/gotoTop";
     export default {
         name: 'optimization',
@@ -188,7 +194,8 @@
             horizList,
             horizListFlex,
             textTitleBox,
-            columnListBox
+            columnListBox,
+            gotoTop
         },
         created() {