Przeglądaj źródła

优化:微信公众号端H5标题栏重复问题

萤火科技 2 lat temu
rodzic
commit
d37a9ff78b
2 zmienionych plików z 44 dodań i 40 usunięć
  1. 42 26
      core/mixins/app.js
  2. 2 14
      pages/category/components/commodity.vue

+ 42 - 26
core/mixins/app.js

@@ -1,31 +1,47 @@
-  import { computed } from 'vue'
-  import { useStore, mapGetters } from 'vuex'
-  import store from '@/store/index'
-  import platform from '@/core/platform'
+import { computed } from 'vue'
+import { useStore, mapGetters } from 'vuex'
+import store from '@/store/index'
+import platform from '@/core/platform'
 
-  // 字符串驼峰转中划线
-  const formatToLine = value => {
-    return value.replace(/([A-Z])/g, '-$1').toLowerCase()
-  }
+// 字符串驼峰转中划线
+const formatToLine = value => {
+  return value.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
 
-  // 主题样式 (因小程序端不支持styleObject语法,所以需要转换成字符串)
-  const appTheme2Str = appTheme => {
-    let str = ''
-    for (const index in appTheme) {
-      const name = formatToLine(index)
-      str += `--${name}:${appTheme[index]};`
-    }
-    return str
+// 主题样式 (因小程序端不支持styleObject语法,所以需要转换成字符串)
+const appTheme2Str = appTheme => {
+  let str = ''
+  for (const index in appTheme) {
+    const name = formatToLine(index)
+    str += `--${name}:${appTheme[index]};`
   }
+  return str
+}
 
-  export default {
-    data() {
-      return {
-        platform
-      }
-    },
-    computed: {
-      appTheme: () => store.getters.appTheme,
-      appThemeStyle: () => appTheme2Str(store.getters.appTheme)
+export default {
+  data() {
+    return {
+      platform
+    }
+  },
+  computed: {
+    appTheme: () => store.getters.appTheme,
+    appThemeStyle: () => appTheme2Str(store.getters.appTheme)
+  },
+  mounted() {
+    if (this.platform === 'WXOFFICIAL') {
+      // this.navTitle()
     }
-  }
+  },
+  methods: {
+    navTitle() {
+      this.$nextTick(() => {
+        const navTitleDom = document.getElementsByTagName('uni-page-head')
+        if (navTitleDom.length) {
+          navTitleDom[0].style.display = 'none'
+          document.body.style.setProperty('--window-top', '0px');
+        }
+      })
+    }
+  }
+}

+ 2 - 14
pages/category/components/commodity.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container" :style="appThemeStyle">
     <!-- 一级分类 -->
-    <scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }" @touchmove.stop.prevent>
+    <scroll-view class="cate-left" :scroll-y="true" @touchmove.stop.prevent>
       <text class="type-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">全部</text>
       <text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index" @click="handleSelectNav(index)">{{ item.name }}</text>
     </scroll-view>
@@ -93,8 +93,6 @@
       return {
         // 枚举类
         PageCategoryStyleEnum,
-        // 列表高度
-        scrollHeight: 0,
         // 一级分类:指针
         curIndex: -1,
         // 是否显示子分类
@@ -116,10 +114,6 @@
         }
       }
     },
-    created() {
-      // 设置分类列表高度
-      this.setListHeight()
-    },
     computed: {
       // 二级分类列表
       subCateList() {
@@ -176,12 +170,6 @@
         return app.curIndex > -1 ? app.list[app.curIndex].category_id : 0
       },
 
-      // 设置列表内容的高度
-      setListHeight() {
-        const { windowHeight } = uni.getSystemInfoSync()
-        this.scrollHeight = windowHeight - rpx2px(88)
-      },
-
       // 一级分类:选中分类
       handleSelectNav(index) {
         this.curIndex = index
@@ -248,7 +236,7 @@
     left: var(--window-left);
     bottom: var(--window-bottom);
     width: 173rpx;
-    height: 100%;
+    height: calc(100% - var(--window-bottom) - 88rpx); 
     background: #f8f8f8;
     color: #444;
   }