侧边菜单组件优化

package.json

@@ -91,7 +91,7 @@
     "miniprogram-api-typings": "*",
     "node-sass": "^5.0.0",
     "postcss-comment": "^2.0.0",
-    "sass-loader": "^10.0.1",
+    "sass-loader": "^10.1.1",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

src/App.vue

@@ -4,12 +4,13 @@
  * @Author: dream
  * @Date: 2021-03-25 15:13:56
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 17:27:49
+ * @LastEditTime: 2021-03-28 00:08:03
 -->
 <script>
 export default {
   onLaunch: function () {
     console.log('App Launch')
+    this.$store.dispatch('systemStore/getSystemInfo')
   },
   onShow: function () {
     console.log('App Show')

src/components/iphLeftMenu.vue

@@ -4,10 +4,10 @@
  * @Author: dream
  * @Date: 2021-03-27 14:13:43
  * @LastEditors: dream
- * @LastEditTime: 2021-03-27 18:29:15
+ * @LastEditTime: 2021-03-28 01:23:20
 -->
 <template>
-	<view class="left-menu-main">
+	<scroll-view class="left-menu-main" scroll-y>
     <block v-for="(item, index) in list" :key="index">
       <view
         :class="['menu-item', item.value === current ? 'active' : '']"
@@ -22,7 +22,14 @@
         top: `${bar.top}rpx`
       }"
     ></view>
-  </view>
+    <view
+      class="menu-content-bar"
+      :style="{
+        height: `${contentBar.height}rpx`,
+        top: `${contentBar.top}rpx`
+      }"
+    ></view>
+  </scroll-view>
 </template>
 
 <script>
@@ -43,27 +50,67 @@ export default {
       }, {
         value: 4,
         label: '两行文案两行'
+      }, {
+        value: 5,
+        label: '面粉'
+      }, {
+        value: 6,
+        label: '两行文案两行'
+      }, {
+        value: 7,
+        label: '面粉'
+      }, {
+        value: 8,
+        label: '两行文案两行'
+      }, {
+        value: 9,
+        label: '面粉'
+      }, {
+        value: 10,
+        label: '两行文案两行'
+      }, {
+        value: 11,
+        label: '面粉'
+      }, {
+        value: 12,
+        label: '两行文案两行'
       }],
       bar: {
         top: 0,
         height: 0
+      },
+      contentBar: {
+        top: 0,
+        height: 0
       }
     }
   },
   mounted () {
-    this.$nextTick(() => {
-      this.changeMenu(this.list[0])
-    })
+    this.changeMenu(this.list[0])
   },
   methods: {
     changeMenu (val) {
       this.current = val.value
+      const warp = uni.createSelectorQuery().in(this).select('.left-menu-main')
       const view = uni.createSelectorQuery().in(this).select(`#menu-item-${this.current}`)
       view.boundingClientRect(data => {
-        this.bar.top = data ? (data.top + 14) * 2 : 0
-        this.bar.height = data ? (data.height - 28) * 2 : 32
+        warp.fields({
+          rect: true,
+          scrollOffset: true
+        }, res => {
+          if (data) {
+            this.bar.top = (data.top - res.top + res.scrollTop + 14) * 2
+            this.bar.height = (data.height - 28) * 2
+            this.contentBar.top = (data.top - res.top + res.scrollTop) * 2
+            this.contentBar.height = data.height * 2
+          } else {
+            this.bar.top = 0
+            this.bar.height = 28
+            this.contentBar.top = 0
+            this.contentBar.height = 92
+          }
+        }).exec()
       }).exec()
-      console.log(this.bar)
     }
   }
 }
@@ -71,7 +118,10 @@ export default {
 
 <style lang="scss" scoped>
 .left-menu-main {
+  position: relative;
   width: 160px;
+  height: 100%;
+  overflow-y: auto;
   .menu-item {
     padding: 28px;
     font-weight: 500;
@@ -80,14 +130,23 @@ export default {
   }
   .active {
     color: $u-type-primary;
-    background-color: $iph-standby-bg;
   }
   .menu-bar {
+    z-index: -1;
     position: absolute;
     left: 0;
     width: 6px;
     background: $u-type-primary;
     border-radius: 4px;
+    transition: all .3s ease;
+  }
+  .menu-content-bar {
+    z-index: -2;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    background-color: $iph-standby-bg;
+    transition: all .3s ease;
   }
 }
 </style>

src/main.js

@@ -9,6 +9,7 @@
 import Vue from 'vue'
 import App from './App'
 import uView from 'uview-ui'
+import store from './store'
 
 Vue.config.productionTip = false
 
@@ -19,6 +20,8 @@ App.mpType = 'app'
 Vue.use(uView)
 
 const app = new Vue({
-  ...App
+  ...App,
+  store
+
 })
 app.$mount()

src/pages/goods/goods.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-27 17:00:29
+ * @LastEditTime: 2021-03-28 01:15:27
 -->
 <template>
 	<view class="goods-main">
@@ -19,7 +19,7 @@
         :show-action="false"
       ></u-search>
     </view>
-    <view class="main">
+    <view :style="{ height: `${mainHeight}px` }">
       <iph-left-mune/>
     </view>
   </view>
@@ -36,8 +36,12 @@ export default {
 
     }
   },
-  onLoad () {
-
+  computed: {
+    mainHeight () {
+      const system = this.$store.state.systemStore.systemInfo
+      const height = system.windowHeight - system.statusBarHeight - 106
+      return height
+    }
   },
   methods: {
 

src/store/index.js

@@ -0,0 +1,22 @@
+/*
+ * @Descripttion: vuex
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-27 23:34:28
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-27 23:59:13
+ */
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import systemStore from './modules/systemStore'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    systemStore
+  }
+})
+
+export default store

src/store/modules/systemStore.js

@@ -0,0 +1,25 @@
+/*
+ * @Descripttion: 系统参数Store
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-27 23:49:23
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-28 00:03:34
+ */
+export default {
+  namespaced: true,
+  state: () => ({
+    systemInfo: {}
+  }),
+  mutations: {
+    changeSystemInfo (state, data) {
+      state.systemInfo = data
+    }
+  },
+  actions: {
+    getSystemInfo ({ commit }) {
+      const info = uni.getSystemInfoSync()
+      commit('changeSystemInfo', info)
+    }
+  }
+}