no message

pages/coupon/list/list.vue

 <template>
-  <view class="couponlistStyle height100vh column">
+	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh">
+		<view class="headStatus" v-if="scrollTop > 50" :style="[
+					headStyle,
+					{
+						zIndex: scrollTop < 10 ? 'unset' : 2,
+						opacity: scrollTop < 10 ? '100' : scrollTop,
+					},
+					]">
+							<view class="title" v-if="scrollTop > 50">{{ pageTitle }}</view>
+			</view>
+			<view class="couponlistStyle column">
 				<view>
 					<view class="relative">
 						<headerCoupon style="position: absolute; left: 0;top: 0;z-index: 1;"></headerCoupon>
@@ -97,6 +107,8 @@
 		
 				<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
 			</view>
+	</scroll-view>
+ 
 </template>
 
 <script>
@@ -136,6 +148,8 @@ export default {
 		fontSize: '28rpx',
 	  },
 	  scrollLeft: 0,
+	  scrollTop: 0,
+	  headStyle: {},
     };
   },
   created() {
@@ -175,6 +189,12 @@ export default {
     
   },
   methods: {
+	scrollHandler(e) {
+		this.scrollTop = e.detail.scrollTop;
+	},
+	scrollTopHandler() {
+		this.scrollTop = 0;
+	},
 	SearchData() {
 		this.msg.pageIndex = 1;
 		this.g = [];
@@ -324,6 +344,7 @@ export default {
 }
 .couponlistStyle {
   width: 100%;
+  min-height: 100vh;
   background: #f3f4f6;
 }
 .couponlistStyle .couponlist{
@@ -464,4 +485,37 @@ export default {
   margin-left: -100rpx;
   z-index: 999;
 }
+.headStatus {
+	overflow: hidden;
+	position: relative;
+	width: 140vw;
+	padding-right: 40vw;
+	padding-top: 50rpx;
+	padding-bottom: 10px;
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	display: flex;
+	background-image: linear-gradient(to right, #e6b865, #ebb45e);
+}
+
+.headStatus .arrow {
+	height: 24px;
+	margin: 5px 10px;
+	width: 24px;
+}
+
+.headStatus .title {
+	font-size: 18px;
+	color: #fff;
+	flex: 1;
+	width: 1px;
+	line-height: 34px;
+	text-align: center;
+}
+
+.headStatus .title {
+	color: #111 !important;
+}
 </style>