返回顶部组件

App.vue

@@ -20,6 +20,6 @@
 <style>
 	/*每个页面公共css */
 	@import '@/common/style/reset.css';
-	@import '@/common/style/uni.css';
+	/* @import '@/common/style/uni.css'; */
 	@import '@/common/style/layout.css';
 </style>

common/style/layout.css

@@ -110,8 +110,9 @@ uni-button:after {
 	top: calc(var(--status-bar-height) + 72rpx);
 	width: 100%;
 	height: auto;
-	padding: 0rpx 14rpx 108rpx 14rpx;
-	background: linear-gradient(to bottom, #ff6400 0%, #fee4d7 30%, #f6f6f6 100%)
+	padding: 20rpx 14rpx 140rpx 14rpx;
+	/* background: linear-gradient(to bottom, #ff6400 0%, #fee4d7 30%, #f6f6f6 100%) */
+	background-color: #f6f6f6;
 }
 .zd_wrapper {
 	width: 100%;

components/NavBar.vue

@@ -54,7 +54,8 @@
 	_fj()
 	position fixed
 	_wh(100%, calc(var(--status-bar-height) + 72rpx))
-	background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
+	// background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
+	background-color $red
 	z-index 200
 	padding var(--status-bar-height) 20rpx 0 
 .page_name

components/upTop.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="back-top" @tap="toTop" v-show="showBtn">
+		<uni-icons class="zd_icon_wraper" type="arrow-up" size="30"></uni-icons>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"upTop",
+		data() {
+			return {
+				showBtn: false
+			};
+		},
+		props: {
+			scrollTop: {
+				type: Number,
+				default: 0
+			}
+		},
+		methods: {
+			topData(e) {
+				this.showBtn = e > 50
+			},
+			// 返回顶部
+			toTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 100
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+.back-top
+	position: fixed;
+	z-index: 9999;
+	right: 20rpx;
+	bottom: 150rpx;
+	background-color: #fff;
+	width: 80rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	border-radius: 50%;
+	text-align: center;
+	box-shadow: 0 4rpx 16rpx rgba(28,31,35,.3);
+</style>

pages/ProductManage/SlittingFeeding.vue

@@ -140,20 +140,24 @@
 			</view>
 		</view>
 		<view v-if="active" class="msg_mask"></view>
+		<up-top ref="UT" :scrollTop="top"></up-top>
 	</view>
 </template>
 
 <script>
 	import NavBar from '@/components/NavBar.vue'
 	import SearchBox from '@/components/SearchBox.vue'
+	import UpTop from '@/components/upTop.vue'
 	import {queryProductArea, feedingQueryMaterialInfo, feedingConfirm, feedingQueryPoint, feedingHandleConfirm, feedingVehicleReturn} from '@/utils/getData2.js'
 	export default {
 		components: {
 			NavBar,
-			SearchBox
+			SearchBox,
+			UpTop
 		},
 		data() {
 			return {
+				top: 0,
 				val1: '',
 				val2: '',
 				options: [],
@@ -181,6 +185,9 @@
 				btn_active: false
 			};
 		},
+		onPageScroll(e) {
+			this.$refs.UT.topData(e.scrollTop)
+		},
 		created () {
 			this._queryProductArea()
 		},