pref: 优化吸顶示例样式

pages/template/scroll-sticky/scroll-sticky.uvue

 <template>
 	<scroll-view :scroll-y="true" @scroll="onScroll" class="page">
-
-	<view v-for="(item,index) in list" :key="index" class="item">
-		first content-{{item}}
+		<view class="content-item">
+			<text class="text">向上滑动页面，体验元素吸顶效果。</text>
+		</view>
+		<view v-for="(item,index) in list" :key="index" class="content-item">
+			<text class="text">first content-{{item}}</text>
 		</view>
 
 		<!-- <view ref="sticky" class="search" @click="" :style="{
@@ -16,12 +18,12 @@
 			<text class="search-btn">搜索</text>
 		</view>
 
-	<view v-for="(item,index) in list" :key="index" class="item">
-		second content-{{item}}
+		<view v-for="(item,index) in list" :key="index" class="content-item">
+			<text class="text">second content-{{item}}</text>
 		</view>
 
-	<view v-for="(item,index) in list" :key="index" class="item">
-		second content-{{item}}
+		<view v-for="(item,index) in list" :key="index" class="content-item">
+			<text class="text">second content-{{item}}</text>
 		</view>
 
 	</scroll-view>
@@ -32,7 +34,7 @@
 	export default {
 		data() {
 			return {
-		list: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
+				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
 				stickyTop: 0,
 				stickyTran: 0,
 				scrollTop: 0,
@@ -41,18 +43,18 @@
 		},
 		methods: {
 			onScroll(e : ScrollEvent) {
-			if(e.detail.scrollTop > this.stickyTop){
+				if (e.detail.scrollTop > this.stickyTop) {
 					let stickyTran = e.detail.scrollTop - this.stickyTop;
-				if(stickyTran!=this.stickyTran){
-					this.stickyNode?.style?.setProperty('transform','translateY('+stickyTran+'px)');
+					if (stickyTran != this.stickyTran) {
+						this.stickyNode?.style?.setProperty('transform', 'translateY(' + stickyTran + 'px)');
 					}
 					this.stickyTran = stickyTran;
-			}else{
-				this.stickyNode?.style?.setProperty('transform','');
+				} else {
+					this.stickyNode?.style?.setProperty('transform', '');
 					this.stickyTran = 0;
 				}
 			},
-      back(){
+			back() {
 				uni.navigateBack({
 					success(result) {
 						console.log('navigateBack success', result.errMsg)
@@ -80,16 +82,27 @@
 </script>
 
 <style>
-.page {
+	.page {
 		flex: 1;
-	background-color: azure;
-}
+		padding: 5px 15px;
+		background-color: #f5f5f5;
+	}
+
+	.content-item {
+		padding: 15px;
+		margin: 5px 0;
+		background-color: #fff;
+		border-radius: 5px;
 
-.item {
-	height: 100px;
-}
+	}
+
+	.text {
+		font-size: 14px;
+		color: #666;
+		line-height: 20px;
+	}
 
-.search {
+	.search {
 		background-color: #FFFFFF;
 		border: 1px solid #fbdf0d;
 		height: 35px;
@@ -100,17 +113,18 @@
 		align-items: center;
 		justify-content: space-between;
 		z-index: 100;
-}
-.search-tip-text {
+	}
+
+	.search-tip-text {
 		font-size: 12px;
 		color: #666;
-}
-.search-btn {
+	}
+
+	.search-btn {
 		font-size: 12px;
 		background-color: #ff6900;
 		color: #FFF;
 		padding: 5px 8px;
 		border-radius: 100px;
-}
-
+	}
 </style>
\ No newline at end of file