适配顶部导航

pages/index/index.vue

@@ -2,7 +2,7 @@
 <template>
 	<view v-if="template">
 		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
-			:navbarStyle="template.style?.navbar" onShareAppMessage>
+			:navbarStyle="template.navigationBar" onShareAppMessage>
 			<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
 				<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
 			</s-block>

pages/index/user.vue

@@ -5,7 +5,7 @@
     tabbar="/pages/index/user"
     navbar="custom"
     :bgStyle="template.page"
-    :navbarStyle="template.style?.navbar"
+    :navbarStyle="template.navigationBar"
     onShareAppMessage
   >
     <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">

sheep/components/s-custom-navbar/components/navbar-item.vue

@@ -1,5 +1,7 @@
+<!-- 顶部导航栏 - 单元格 -->
 <template>
   <view class="ss-flex ss-col-center">
+    <!-- 类型一： 文字 -->
     <view
       v-if="data.type === 'text'"
       class="nav-title inline"
@@ -7,15 +9,17 @@
     >
       {{ data.text }}
     </view>
+    <!-- 类型二： 图片 -->
     <view
       v-if="data.type === 'image'"
       :style="[{ width: width }]"
       class="menu-icon-wrap ss-flex ss-row-center ss-col-center"
       @tap="sheep.$router.go(data.url)"
     >
-      <image class="nav-image" :src="sheep.$url.cdn(data.src)" mode="aspectFit"></image>
+      <image class="nav-image" :src="sheep.$url.cdn(data.imgUrl)" mode="aspectFit"></image>
     </view>
-    <view class="ss-flex-1" v-if="data.type == 'search'" :style="[{ width: width }]">
+    <!-- 类型三： 搜索框 -->
+    <view class="ss-flex-1" v-if="data.type === 'search'" :style="[{ width: width }]">
       <s-search-block
         :placeholder="data.placeholder || '搜索关键字'"
         :radius="data.borderRadius"

sheep/components/s-custom-navbar/s-custom-navbar.vue

@@ -1,7 +1,7 @@
 <!-- 顶部导航栏 -->
 <template>
   <navbar
-    :alway="isAlway"
+    :alway="isAlways"
     :back="false"
     bg=""
     :placeholder="isPlaceholder"
@@ -12,7 +12,7 @@
     <template #item>
       <view class="nav-box">
         <view class="nav-icon" v-if="showLeftButton">
-          <view class="icon-box ss-flex" :class="{ 'inner-icon-box': data.mode == 'inner' }">
+          <view class="icon-box ss-flex" :class="{ 'inner-icon-box': data.styleType === 'inner' }">
             <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
               <text class="sicon-back" v-if="hasHistory" />
               <text class="sicon-home" v-else />
@@ -43,7 +43,7 @@
    *
    *
    * @property {Number | String}  alwaysShow = [0,1]			    - 是否常驻
-   * @property {Number | String}  mode = [inner]			    	- 是否沉浸式
+   * @property {Number | String}  styleType = [inner]			   	- 是否沉浸式
    * @property {String | Number} type 		 					- 标题背景模式
    * @property {String} color 		 							- 页面背景色
    * @property {String} src 		 								- 页面背景图片
@@ -66,26 +66,27 @@
   });
   const hasHistory = sheep.$router.hasHistory();
   const sticky = computed(() => {
-    if (props.data.mode == 'inner') {
-      if (props.data.alway) {
+    if (props.data.styleType === 'inner') {
+      if (props.data.alwaysShow) {
         return false;
       }
     }
-    if (props.data.mode == 'normal') {
+    if (props.data.styleType === 'normal') {
       return false;
     }
   });
   const navList = computed(() => {
-    if (!props.data.list) return [];
     // #ifdef MP
-    return props.data.list.mp;
+    return props.data.mapCells || [];
     // #endif
-    return props.data.list.app;
+    return props.data.otherCells || [];
   });
-  // 单元格大小
+  // 页面宽度
   const windowWidth = sheep.$platform.device.windowWidth;
+  // 单元格宽度
   const cell = computed(() => {
     if (unref(navList).length) {
+      // 默认宽度为8个格子，微信公众号右上角有胶囊按钮所以是6个格子
       let cell = (windowWidth - 90) / 8;
       // #ifdef MP
       cell = (windowWidth - 80 - unref(sheep.$platform.capsule).width) / 6;
@@ -102,28 +103,26 @@
     };
     return obj;
   };
-  const isAlway = computed(() =>
-    props.data.mode === 'inner' ? Boolean(props.data.alwaysShow) : true,
+  const isAlways = computed(() =>
+    props.data.styleType === 'inner' ? Boolean(props.data.alwaysShow) : true,
   );
   const isOpacity = computed(() =>
-    props.data.mode === 'normal'
+    props.data.styleType === 'normal'
       ? false
       : props.showLeftButton
       ? false
-      : props.data.mode === 'inner',
+      : props.data.styleType === 'inner',
   );
-  const isPlaceholder = computed(() => props.data.mode === 'normal');
+  const isPlaceholder = computed(() => props.data.styleType === 'normal');
   const bgStyles = computed(() => {
-    if (props.data.type) {
-      return {
-        background:
-          props.data.type == 'color'
-            ? props.data.color
-            : `url(${sheep.$url.cdn(props.data.src)}) no-repeat top center / 100% 100%`,
-      };
-    }
+    return {
+      background:
+          props.data.bgType === 'img' && props.data.bgImg
+          ? `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`
+          : props.data.bgColor
+    };
   });
-
+  // 左侧按钮：返回上一页或首页
   function onClickLeft() {
     if (hasHistory) {
       sheep.$router.back();
@@ -131,6 +130,7 @@
       sheep.$router.go('/pages/index/index');
     }
   }
+  // 右侧按钮：打开快捷菜单
   function onClickRight() {
     showMenuTools();
   }

sheep/components/s-layout/s-layout.vue

@@ -4,7 +4,7 @@
     :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
   >
     <view class="page-main" :style="[bgMain]">
-      <!-- 默认通用顶部导航栏 -->
+      <!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
       <su-navbar
         v-if="navbar === 'normal'"
         :title="title"
@@ -16,21 +16,21 @@
         :defaultSearch="defaultSearch"
       />
 
-      <!-- 装修组件导航栏-普通 -->
+      <!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
       <s-custom-navbar
         v-else-if="navbar === 'custom' && navbarMode === 'normal'"
         :data="navbarStyle"
         :showLeftButton="showLeftButton"
       />
       <view class="page-body" :style="[bgBody]">
-        <!-- 沉浸式头部 -->
+        <!-- 顶部导航栏-情况3：沉浸式头部 -->
         <su-inner-navbar v-if="navbar === 'inner'" :title="title" />
         <view
           v-if="navbar === 'inner'"
           :style="[{ paddingTop: sheep.$platform.navbar + 'px' }]"
         ></view>
 
-        <!-- 装修组件导航栏-沉浸式 -->
+        <!-- 顶部导航栏-情况4：装修组件导航栏-沉浸式 -->
         <s-custom-navbar v-if="navbar === 'custom' && navbarMode === 'inner'" :data="navbarStyle" :showLeftButton="showLeftButton" />
 
         <!-- 页面内容插槽 -->
@@ -92,7 +92,7 @@
     navbarStyle: {
       type: Object,
       default: () => ({
-        mode: '',
+        styleType: '',
         type: '',
         color: '',
         src: '',
@@ -143,7 +143,7 @@
 
   // 导航栏模式(因为有自定义导航栏 需要计算)
   const navbarMode = computed(() => {
-    if (props.navbar === 'normal' || props.navbarStyle.mode === 'normal') {
+    if (props.navbar === 'normal' || props.navbarStyle.styleType === 'normal') {
       return 'normal';
     }
     return 'inner';