feat: 同时支持h5和weixin的导航栏渐变

pages.config.ts

@@ -6,6 +6,7 @@ export default defineUniPages({
     navigationBarTitleText: 'vue3-uniapp',
     navigationBarBackgroundColor: '#f8f8f8',
     navigationBarTextStyle: 'black',
+    backgroundColor: '#FFFFFF',
   },
   easycom: {
     autoscan: true,

src/pages.json

@@ -3,7 +3,8 @@
     "navigationStyle": "default",
     "navigationBarTitleText": "vue3-uniapp",
     "navigationBarBackgroundColor": "#f8f8f8",
-    "navigationBarTextStyle": "black"
+    "navigationBarTextStyle": "black",
+    "backgroundColor": "#FFFFFF"
   },
   "easycom": {
     "autoscan": true,
@@ -62,7 +63,31 @@
         "navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
         "enablePullDownRefresh": true,
         "backgroundColor": "#23c09c",
-        "navigationStyle": "custom"
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
+        },
+        "mp-weixin": {
+          "navigationStyle": "custom"
+        }
+      }
+    },
+    {
+      "path": "pages/throughout2/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
+        "enablePullDownRefresh": false,
+        "backgroundColor": "#23c09c",
+        "app-plus": {
+          "titleNView": {
+            "type": "transparent"
+          }
+        },
+        "mp-weixin": {
+          "navigationStyle": "custom"
+        }
       }
     }
   ],

src/pages/index/index.vue

@@ -19,6 +19,9 @@
       Demo Count: {{ countStore.count }}
       <button class="ml-2" @click="countStore.increment">新增</button>
     </view>
+    <uni-card>
+      <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
+    </uni-card>
     <uni-icons type="contact" size="30" color="red"></uni-icons>
     <uni-badge text="1"></uni-badge>
     <!-- Sun in light mode, Moon in dark mode, from Carbon -->

src/pages/throughout/index.vue

@@ -4,16 +4,24 @@
     navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
     enablePullDownRefresh: true,
     backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
-    navigationStyle: 'custom',
+    'app-plus': {
+      titleNView: {
+        type: 'transparent',
+      },
+    },
+    'mp-weixin': {
+      navigationStyle: 'custom',
+    },
   },
 }
 </route>
 
 <template>
+  <!-- #ifdef MP-WEIXIN -->
   <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
     <!-- 1/3，多于1个页面，用返回图标 -->
     <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
-      <button class="i-carbon-chevron-left text-current"></button>
+      <view class="i-carbon-chevron-left text-current"></view>
     </navigator>
     <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
     <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
@@ -23,11 +31,12 @@
       url="/pages/index/index"
       class="left-icon"
     >
-      <button class="i-carbon-home text-current"></button>
+      <view class="i-carbon-home text-current"></view>
     </navigator>
     <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
     <view class="title">{{ '我是标题' }}</view>
   </view>
+  <!-- #endif -->
   <scroll-view
     enable-back-to-top
     scroll-y
@@ -48,6 +57,9 @@
       onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
       https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
     </view>
+    <navigator url="/pages/throughout2/index" open-type="navigate" hover-class="navigator-hover">
+      <button>去二级详情页</button>
+    </navigator>
     <view class="bg-white">
       <fly-content :line="30" />
     </view>
@@ -87,7 +99,15 @@ const onRefresherRefresh = async () => {
 page {
   display: flex;
   flex-direction: column;
+
+  // #ifdef MP-WEIXIN
   height: 100%;
+
+  // #endif
+  // #ifndef MP-WEIXIN
+  min-height: 100%;
+
+  // #endif
   overflow: hidden;
 }
 

src/pages/throughout2/index.vue

@@ -0,0 +1,160 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
+    enablePullDownRefresh: false,
+    backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
+    'app-plus': {
+      titleNView: {
+        type: 'transparent',
+      },
+    },
+    'mp-weixin': {
+      navigationStyle: 'custom',
+    },
+  },
+}
+</route>
+
+<template>
+  <!-- #ifdef MP-WEIXIN -->
+  <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+    <!-- 1/3，多于1个页面，用返回图标 -->
+    <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
+      <view class="i-carbon-chevron-left text-current"></view>
+    </navigator>
+    <!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
+    <!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
+    <navigator
+      v-else-if="!isTabbar"
+      open-type="switchTab"
+      url="/pages/index/index"
+      class="left-icon"
+    >
+      <view class="i-carbon-home text-current"></view>
+    </navigator>
+    <!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
+    <view class="title">{{ '我是标题' }}</view>
+  </view>
+  <!-- #endif -->
+
+  <scroll-view
+    enable-back-to-top
+    scroll-y
+    class="scroll-view-bg flex-1 h-full"
+    id="scroller"
+    refresher-enabled
+    @scrolltolower="onScrollToLower"
+    @refresherrefresh="onRefresherRefresh"
+    :refresher-triggered="isTriggered"
+  >
+    <view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+      <view class="pt-1">顶部区域</view>
+      <view>可以是标题，也可以是个人中心头像等</view>
+      <view>建议本区域高度不低于200rpx</view>
+    </view>
+    <view class="p-2 leading-6 bg-white">
+      注意，上面的导航栏渐变效果仅微信端支持，且上面的导航栏无法抽为组件引入使用，否则滚动效果没有了。如果不只是微信小程序使用，可以
+      onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
+      https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
+    </view>
+    <view class="bg-white">
+      <fly-content :line="30" />
+    </view>
+  </scroll-view>
+</template>
+
+<script lang="ts" setup>
+import useNavbarWeixin from '@/hooks/useNavbarWeixin'
+import { onPullDownRefresh } from '@dcloudio/uni-app'
+
+const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
+
+// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好，结合自定义下拉刷新效果很好
+onPullDownRefresh(() => {
+  setTimeout(function fn() {
+    console.log('refresh - onPullDownRefresh')
+    // 关闭动画
+    uni.stopPullDownRefresh()
+  }, 1000)
+})
+
+// 当前下拉刷新状态
+const isTriggered = ref(false)
+// 自定义下拉刷新被触发
+const onRefresherRefresh = async () => {
+  // 开始动画
+  isTriggered.value = true
+  setTimeout(function fn() {
+    console.log('refresh - onRefresherRefresh')
+    // 关闭动画
+    isTriggered.value = false
+  }, 1000)
+}
+</script>
+
+<style lang="scss">
+page {
+  display: flex;
+  flex-direction: column;
+
+  // #ifdef MP-WEIXIN
+  height: 100%;
+
+  // #endif
+  // #ifndef MP-WEIXIN
+  min-height: 100%;
+
+  // #endif
+  overflow: hidden;
+}
+
+.scroll-view-bg {
+  // 这个背景色要与.top-section的背景图差不多，这样下拉刷新看起来才比较协调
+  background-color: #23c09c;
+}
+
+// 这个区域最好要大于200rpx，效果会更好
+.top-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 200rpx;
+  padding: 40rpx 0;
+  line-height: 2;
+  color: #fff;
+  background-image: url('https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/top-bg.png');
+  background-size: cover;
+}
+
+.fly-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 750rpx;
+  color: #000;
+  background-color: transparent;
+
+  .left-icon {
+    position: absolute;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    font-size: 44rpx;
+    color: #000;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    font-size: 32rpx;
+    color: transparent;
+  }
+}
+</style>

uni-pages.d.ts

@@ -7,19 +7,20 @@ interface NavigateToOptions {
   url: "pages/index/index" |
        "pages/demo/index" |
        "pages/my/index" |
-       "pages/throughout/index";
+       "pages/throughout/index" |
+       "pages/throughout2/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 
 interface SwitchTabOptions {
-  url: 'pages/index/index' | 'pages/throughout/index'
+  url: "pages/index/index" | "pages/throughout/index"
 }
 
-type ReLaunchOptions = NavigateToOptions | SwitchTabOptions
+type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;
 
 declare interface Uni {
-  navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void
-  redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void
-  switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void
-  reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void
+  navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void;
+  redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void;
+  switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void;
+  reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void;
 }