更新[BoxJs TF]: 顶栏和底栏可以设置跟随滚动

chavyleung · chavyleung · commit 2ca8d40a93c9 · 2020-08-22T19:22:40.000+08:00
diff --git a/box/chavy.boxjs.html b/box/chavy.boxjs.html
@@ -93,7 +93,13 @@
     <div id="BG"></div>
     <div id="app" v-cloak>
       <v-app v-if="box" :style="appViewStyle">
-        <v-app-bar app v-bind="appBarBind" :class="appBarClass" :value="!isHidedSearchBar" v-touch="{ up: () => isHidedSearchBar = true }">
+        <v-app-bar
+          ref="appBar"
+          v-bind="appBarBind"
+          :class="!$refs.appBar || $refs.appBar.isActive ? 'safe' : undefined"
+          :value="!isHidedSearchBar"
+          v-touch="{ up: () => isHidedSearchBar = true }"
+        >
           <!-- 搜索条 -->
           <v-autocomplete v-bind="ui.searchBar" :label="title" @click="ui.searchDialog.show = true" hide-no-data hide-details solo>
             <template #prepend-inner>
@@ -296,6 +302,22 @@
                 <v-avatar size="32"><v-icon>mdi-dock-top</v-icon></v-avatar>
               </v-btn>
             </v-list-item>
+            <v-list-item class="mt-4">
+              <v-switch
+                dense
+                class="mt-0"
+                label="自动顶栏"
+                v-model="isAutoSearchBar"
+                @change="saveUserCfgs"
+                :persistent-hint="true"
+                hint="顶栏跟随主屏滚动"
+              >
+              </v-switch>
+              <v-spacer></v-spacer>
+              <v-btn fab small text>
+                <v-avatar size="32"><v-icon>mdi-format-align-top</v-icon></v-avatar>
+              </v-btn>
+            </v-list-item>
             <v-list-item class="mt-4">
               <v-switch
                 dense
@@ -312,6 +334,22 @@
                 <v-avatar size="32"><v-icon>mdi-dock-bottom</v-icon></v-avatar>
               </v-btn>
             </v-list-item>
+            <v-list-item class="mt-4">
+              <v-switch
+                dense
+                class="mt-0"
+                label="自动底栏"
+                v-model="isAutoNaviBottom"
+                @change="saveUserCfgs"
+                :persistent-hint="true"
+                hint="底栏跟随主屏滚动"
+              >
+              </v-switch>
+              <v-spacer></v-spacer>
+              <v-btn fab small text>
+                <v-avatar size="32"><v-icon>mdi-format-align-bottom</v-icon></v-avatar>
+              </v-btn>
+            </v-list-item>
             <!-- <v-list-item class="mt-4">
               <v-switch
                 dense
@@ -456,7 +494,7 @@
           </v-list>
         </v-navigation-drawer>
         <!-- 主页 -->
-        <v-main v-scroll="onScroll">
+        <v-main class="appBarBind.app ? 'safe' : ''" v-scroll="onScroll">
           <v-snackbar top app v-model="ui.snackbar.show" v-bind="ui.snackbar">{{ui.snackbar.msg}}</v-snackbar>
           <!-- 主页 -->
           <v-container
@@ -1098,14 +1136,7 @@ <h2 :style="appTitleStyle">{{curbak.name}}</h2>
           </v-container>
         </v-main>
         <!-- 底部 -->
-        <v-bottom-navigation
-          app
-          grow
-          color="primary"
-          :value="view"
-          :input-value="!isHidedNaviBottom"
-          v-touch="{ down: () => isHidedNaviBottom = true }"
-        >
+        <v-bottom-navigation ref="naviBar" v-bind="naviBarBind" v-touch="{ down: () => isHidedNaviBottom = true }">
           <v-progress-linear :active="isLoading" height="2" absolute top indeterminate></v-progress-linear>
           <v-btn @click="switchView('')" value="">首页<v-icon>mdi-home</v-icon></v-btn>
           <v-btn @click="switchView('app')" value="app">应用<v-icon>mdi-application</v-icon></v-btn>
@@ -1411,6 +1442,17 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
               this.box.usercfgs.isHidedSearchBar = val === true
             }
           },
+          isAutoSearchBar: {
+            get() {
+              return this.box.usercfgs.isAutoSearchBar
+            },
+            set(val) {
+              this.box.usercfgs.isAutoSearchBar = val === true
+              if (val === false && !this.isHidedSearchBar) {
+                this.$refs.appBar.isActive = true
+              }
+            }
+          },
           isHidedAppIcons: {
             get() {
               return this.box.usercfgs.isHidedAppIcons || this.isWallpaperMode
@@ -1427,6 +1469,17 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
               this.box.usercfgs.isHidedNaviBottom = val === true
             }
           },
+          isAutoNaviBottom: {
+            get() {
+              return this.box.usercfgs.isAutoNaviBottom
+            },
+            set(val) {
+              this.box.usercfgs.isAutoNaviBottom = val === true
+              if (val === false && !this.isHidedNaviBottom) {
+                this.$refs.naviBar.isActive = true
+              }
+            }
+          },
           // 判断是否有壁纸
           isWallpaper() {
             return !!this.box.usercfgs.bgimg
@@ -1478,20 +1531,29 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
             return style
           },
           appBarBind() {
+            const app = true
             const isEmptyLight = this.isWebApp && !this.isDarkMode && !this.isWallpaper
             const color = isEmptyLight ? 'primary' : 'transparent'
             const flat = color === 'transparent'
-            const hideOnScroll = false
+            const hideOnScroll = !this.isHidedSearchBar && this.isAutoSearchBar
             const collapseOnScroll = false
-            return { color, flat, hideOnScroll, collapseOnScroll }
-          },
-          appBarClass() {
-            return !this.isHidedSearchBar ? 'safe' : ''
+            const scrollThreshold = 20
+            return { app, color, flat, hideOnScroll, collapseOnScroll, scrollThreshold }
           },
           searchBarBind() {
             const color = this.isDarkMode ? null : 'primary'
             return { color }
           },
+          naviBarBind() {
+            const app = true
+            const grow = true
+            const color = 'primary'
+            const value = this.view
+            const inputValue = !this.isHidedNaviBottom
+            const hideOnScroll = !this.isHidedNaviBottom && this.isAutoNaviBottom
+            const scrollThreshold = 160
+            return { app, grow, color, value, inputValue, hideOnScroll, scrollThreshold }
+          },
           appIconFontStyle() {
             const style = {
               'font-size': '10px',
@@ -2070,7 +2132,7 @@ <h2 :class="version === ver.version ? 'primary--text' : undefined">v{{ver.versio
           // 修改应用会话
           updateAppSession(session) {
             session.datas.forEach((dat) => {
-              // 如果属性值是 undefinded 或 null, 则修改为 ``, 否则转为字符串
+              // 如果属性值是 undefined 或 null, 则修改为 ``, 否则转为字符串
               dat.val = !_.isNil(dat.val) ? _.toString(dat.val) : ''
             })
             const key = 'chavy_boxjs_sessions'
diff --git a/box/chavy.boxjs.js b/box/chavy.boxjs.js
@@ -3,7 +3,7 @@ const $ = new Env('BoxJs')
 // 为 eval 准备的上下文环境
 const $eval_env = {}
 
-$.version = '0.7.54'
+$.version = '0.7.55'
 $.versionType = 'beta'
 
 /**
diff --git a/box/release/box.release.tf.json b/box/release/box.release.tf.json
@@ -1,9 +1,21 @@
 {
   "releases": [
+    {
+      "version": "0.7.55",
+      "tags": ["beta"],
+      "author": "@chavyleung",
+      "msg": "更新[BoxJs TF]: 顶栏和底栏可以设置跟随滚动",
+      "notes": [
+        {
+          "name": "新增",
+          "descs": ["顶栏和底栏可以设置跟随滚动"]
+        }
+      ]
+    },
     {
       "version": "0.7.54",
       "tags": ["beta"],
-      "author": "@GideonSenku",
+      "author": "@id77",
       "icon": "https://avatars3.githubusercontent.com/u/29748519",
       "repo": "https://github.com/chavyleung",
       "msg": "更新[BoxJs TF]: 侧栏增加新的贡献者 @id77",
