添加通过scroll事件实现吸顶效果示例

搜索栏示例调整为直接操作style更新Node

pages.json

@@ -653,6 +653,18 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/template/scroll-sticky/scroll-sticky",
+      "style": {
+        "navigationBarTitleText": "滚动吸顶"
+      }
+    },
+    {
+      "path": "pages/template/scroll-sticky2/scroll-sticky2",
+      "style": {
+        "navigationBarTitleText": "滚动吸顶2"
+      }
+    },
     {
       "path": "pages/API/get-battery-info/get-battery-info",
       "style": {
@@ -667,6 +679,14 @@
           "enablePullDownRefresh": false
         }
       }
+        ,{
+            "path" : "pages/template/scroll-fold-nav2/scroll-fold-nav2",
+            "style" :                                                                                    
+            {
+        "navigationStyle": "custom"
+            }
+            
+        }
     ],
   "globalStyle": {
     "pageOrientation": "portrait",

pages/tabBar/template.uvue

@@ -51,6 +51,13 @@
 						name: "随滚动折叠的导航栏",
 						open: false,
 						pages: [] as Page[]
+					},
+					{
+						id: "scroll-fold-nav2",
+						url: "scroll-fold-nav2",
+						name: "随滚动折叠的导航栏2",
+						open: false,
+						pages: [] as Page[]
 					}, {
 						id: "swiper-list",
 						url: "swiper-list",
@@ -90,11 +97,17 @@
 						pages: [] as Page[]
 					},
 					{
-						id: "sticky",
-						url: "sticky",
+						id: "scroll-sticky",
+						url: "scroll-sticky",
 						name: "吸顶",
 						open: false,
-						enable: false,
+						pages: [] as Page[]
+					},
+					{
+						id: "scroll-sticky2",
+						url: "scroll-sticky2",
+						name: "吸顶2",
+						open: false,
 						pages: [] as Page[]
 					},
 					{

pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue

+<template>
+  <view class="page">
+    <scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view">
+      <view class="content">
+        <view style="height: 110px;">
+          <!-- 垫高专用 -->
+        </view>
+        <view v-for="(item,index) in 20" :key="index" style="height: 100px;background-color: #FFF;">
+          content-{{item}}
+        </view>
+      </view>
+    </scroll-view>
+
+    <view class="top-box" :style="{height:(110 - (scrollTop>40?40:scrollTop) )+'px','background-color': 'rgba(255, 255, 255, '+(scrollTop*3>100?100:scrollTop*3)/100+')'}">
+      <view class="scroll-fold-nav"
+        :style="{'opacity': 1 -(scrollTop*3>100?100:scrollTop*3)/100}"
+      >
+        <view style="margin-left: 30px;">DCloud 为开发者而生</view>
+      </view>
+      <view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
+        <image src="/static/template/scroll-fold-nav/back.png" style="width: 20px;" mode="widthFix"></image>
+      </view>
+      <view ref="search" class="search" @click="toSearchPage" style="width:700rpx;top:0px">
+        <view style="flex-direction: row;">
+          <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
+          <text class="search-tip-text">请输入你要搜索的内容</text>
+        </view>
+        <text class="search-btn">搜索</text>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+  export default {
+    data() {
+      return {
+        scrollTop: 0,
+        searchWidth: 700,
+		searchNode: null as INode|null
+      }
+    },
+    methods: {
+      onScroll(e : ScrollEvent) {
+        let scrollTop = e.detail.scrollTop
+		this.searchNode?.style?.setProperty('width',700 - (scrollTop>40?40:scrollTop) +'rpx');
+		this.searchNode?.style?.setProperty('top',0 - (scrollTop>40?40:scrollTop) +'px');
+		this.scrollTop = scrollTop;
+		console.log('onScroll', e);
+      },
+      back(){
+        // uni.navigateBack()  // 这么写用不了
+        // 这么写可以用
+		uni.navigateBack({
+		  success(result) {
+		    console.log('navigateBack success', result.errMsg)
+		  },
+		  fail(error) {
+		    console.log('navigateBack fail', error.errMsg)
+		  },
+		  complete(result) {
+		    console.log('navigateBack complete', result.errMsg)
+		  },
+		})
+        
+        // uni.switchTab({
+        //   url:'/pages/tabBar/template'
+        // })
+        
+      },
+      toSearchPage(){
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none'
+        });
+      }
+    },
+    onLoad() {
+    },
+	onReady() {
+		this.searchNode = this.$refs['search'] as INode;
+	}
+  }
+</script>
+
+<style>
+  .page {
+    flex: 1;
+    background-color: #fbdf0d;
+  }
+
+  .scroll-view {
+    flex: 1;
+  }
+
+  .top-box {
+    position: fixed;
+    top: 0;
+    padding-top: 25px;
+    align-items: flex-end;
+    border-bottom: 1px solid #efefef;
+  }
+
+  .scroll-fold-nav {
+    height: 44px;
+    width: 750rpx;
+    justify-content: center;
+  }
+
+  .search {
+    background-color: #FFFFFF;
+    border: 1px solid #fbdf0d;
+    height: 35px;
+    border-radius: 100px;
+    margin: 0 25rpx;
+    padding: 8px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .search-tip-text {
+    font-size: 12px;
+    color: #666;
+  }
+  .search-btn {
+    font-size: 12px;
+    background-color: #ff6900;
+    color: #FFF;
+    padding: 5px 8px;
+    border-radius: 100px;
+  }
+</style>
\ No newline at end of file

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>
+
+	<!-- <view ref="sticky" class="search" @click="" :style="{
+'transform': 'translateY('+stickyTran+'px)'
+	}"> -->
+	<view ref="sticky" class="search" @click="">
+		<view style="flex-direction: row;">
+		  <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
+		  <text class="search-tip-text">请输入你要搜索的内容</text>
+		</view>
+		<text class="search-btn">搜索</text>
+	</view>
+
+	<view v-for="(item,index) in list" :key="index" class="item">
+		second content-{{item}}
+	</view>
+
+	<view v-for="(item,index) in list" :key="index" class="item">
+		second content-{{item}}
+	</view>
+
+	</scroll-view>
+</template>
+
+<script>
+  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+  export default {
+    data() {
+      return {
+		list: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
+		stickyTop: 0,
+		stickyTran: 0,
+        scrollTop: 0,
+        stickyNode: null as INode | null
+      }
+    },
+    methods: {
+		onScroll(e : ScrollEvent) {
+			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)');
+				}
+				this.stickyTran = stickyTran;
+			}else{
+				this.stickyNode?.style?.setProperty('transform','');
+				this.stickyTran = 0;
+			}
+		},
+      back(){
+		uni.navigateBack({
+		  success(result) {
+		    console.log('navigateBack success', result.errMsg)
+		  },
+		  fail(error) {
+		    console.log('navigateBack fail', error.errMsg)
+		  },
+		  complete(result) {
+		    console.log('navigateBack complete', result.errMsg)
+		  },
+		})
+      }
+    },
+    onLoad() {
+    },
+	onReady() {
+		this.stickyNode = this.$refs['sticky'] as INode;
+		// let rect = this.stickyNode?.getBoundingClientRect();
+		// this.stickyTop = rect?.top;
+		//this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top;
+		let rect = (this.$refs['sticky'] as INode).getBoundingClientRect();
+		this.stickyTop = rect.top;
+	}
+  }
+</script>
+
+<style>
+.page {
+	flex: 1;
+	background-color: azure;
+}
+
+.item {
+	height: 100px;
+}
+
+.search {
+	background-color: #FFFFFF;
+	border: 1px solid #fbdf0d;
+	height: 35px;
+	border-radius: 100px;
+	margin: 0 25rpx;
+	padding: 8px;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.search-tip-text {
+	font-size: 12px;
+	color: #666;
+}
+.search-btn {
+	font-size: 12px;
+	background-color: #ff6900;
+	color: #FFF;
+	padding: 5px 8px;
+	border-radius: 100px;
+}
+
+</style>
\ No newline at end of file

pages/template/scroll-sticky2/scroll-sticky2.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>
+
+	<view ref="sticky" class="search" @click="" :style="{
+'transform': 'translateY('+stickyTran+'px)'
+	}">
+	<!-- <view ref="sticky" class="search" @click=""> -->
+		<view style="flex-direction: row;">
+		  <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
+		  <text class="search-tip-text">请输入你要搜索的内容</text>
+		</view>
+		<text class="search-btn">搜索</text>
+	</view>
+
+	<view v-for="(item,index) in list" :key="index" class="item">
+		second content-{{item}}
+	</view>
+
+	<view v-for="(item,index) in list" :key="index" class="item">
+		second content-{{item}}
+	</view>
+
+	</scroll-view>
+</template>
+
+<script>
+  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+  export default {
+    data() {
+      return {
+		list: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
+		stickyTop: 0,
+		stickyTran: 0,
+        scrollTop: 0,
+        stickyNode: null as INode | null
+      }
+    },
+    methods: {
+		onScroll(e : ScrollEvent) {
+			if(e.detail.scrollTop > this.stickyTop){
+				let stickyTran = e.detail.scrollTop - this.stickyTop;
+				// this.stickyNode?.style?.setProperty('transform','translateY('+stickyTran+'px)');
+
+				this.stickyTran = stickyTran;
+			}else{
+				// this.stickyNode?.style?.setProperty('transform','');
+
+				this.stickyTran = 0;
+			}
+		},
+      back(){
+		uni.navigateBack({
+		  success(result) {
+		    console.log('navigateBack success', result.errMsg)
+		  },
+		  fail(error) {
+		    console.log('navigateBack fail', error.errMsg)
+		  },
+		  complete(result) {
+		    console.log('navigateBack complete', result.errMsg)
+		  },
+		})
+      }
+    },
+    onLoad() {
+    },
+	onReady() {
+		this.stickyNode = this.$refs['sticky'] as INode;
+		// let rect = this.stickyNode?.getBoundingClientRect();
+		// this.stickyTop = rect?.top;
+
+		let rect = (this.$refs['sticky'] as INode).getBoundingClientRect();
+		this.stickyTop = rect.top;
+	}
+  }
+</script>
+
+<style>
+.page {
+	flex: 1;
+	background-color: azure;
+}
+
+.item {
+	height: 100px;
+}
+
+.search {
+	background-color: #FFFFFF;
+	border: 1px solid #fbdf0d;
+	height: 35px;
+	border-radius: 100px;
+	margin: 0 25rpx;
+	padding: 8px;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.search-tip-text {
+	font-size: 12px;
+	color: #666;
+}
+.search-btn {
+	font-size: 12px;
+	background-color: #ff6900;
+	color: #FFF;
+	padding: 5px 8px;
+	border-radius: 100px;
+}
+
+</style>
\ No newline at end of file