feat: 添加navbar导航栏

修复屏幕宽度过宽导致的苹果手机无法返回的问题

components/page-title/page-title.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="top">
+	<view class="top" :class="[sticky ? 'sticky': '']">
 		<view v-show="showBack" class="top-back" @click="toBack()">
 			<u-icon color="#333" size="20" name="arrow-left"></u-icon>
 		</view>
@@ -24,11 +24,16 @@
 			goPgae:{
 				type:String,
 				default:''
-			}
+			},
+      // 启用粘性滚动
+      sticky: {
+        type: Boolean,
+        default: false
+      }
 		},
 		data() {
 			return {
-				
+
 			}
 		},
 		methods: {
@@ -45,7 +50,7 @@
 						uni.switchTab({
 							url:this.backUrl
 						})
-					}else{						
+					}else{
 						uni.navigateTo({
 							url:this.backUrl
 						});
@@ -61,7 +66,7 @@
 					}else{
 						uni.navigateBack();
 					}
-					
+
 				}
 			}
 		}
@@ -94,6 +99,13 @@
 			text-overflow: ellipsis;
 			line-height: 40px;
 		}
+
+    &.sticky {
+      position: sticky;
+      top: 0;
+      //防止其他元素遮盖
+      z-index: 99;
+    }
 	}
 	 // .arrow:before {
 	 //    content: " ";

pages/study/courseStudy.vue

@@ -1,6 +1,7 @@
 <template>
 	<!--新的课程学习页面，没有中间的详细页面了，课程点过来就是这个，用户未报名就直接报名-->
 	<view>
+    <page-title :showBack="true" :sticky="true">视频详情</page-title>
 		<watermark></watermark>
 		<u-toast ref="messager"></u-toast>
 		<!-- <page-title :showBack="true"></page-title> -->