选择导航栏换行

pages/investigation/components/problem-tree-item.vue

@@ -8,15 +8,16 @@
       <!--      </uni-breadcrumb>-->
 
       <view class="breadcrumb" :style="problemTreeSelectConfirmList.length > 0 ? 'padding:40rpx;': ''">
+       
        <view
           v-for="(route, index) in problemTreeSelectConfirmList"
           :key="index"
           @click="handleClick(route)"
-          style="display: inline-block;"
+          style="position: absolute;"
+          :style="styles(route, index)"
         >
-          {{ route.itemname }}
-          {{ index === problemTreeSelectConfirmList.length - 1 ? "" : ">" }}
         </view>
+        {{ name }}
       </view>
     </view>
     <view v-if="problemTreeSelectConfirmList.length > 0" style="margin:0 0 0 40rpx; width:calc(100% - 80rpx); height: 1px; background: #cdd0d3;box-sizing: border-box;"></view>
@@ -56,6 +57,8 @@ export default {
       problemTreeSelectList: [],
 	     problemTreeSelectAllList: [],
       problemTreeSelectConfirmList: [],
+      name: '',
+      w1:''
     };
   },
   // 页面加载
@@ -95,17 +98,32 @@ export default {
       this.$.open(even);
     },
     handleSelectProblem(item, index) {
-		console.log(11111)
       this.problemTreeSelectConfirmList[Number(item.nlevel) - 1] = item;
       if (item.children && item.children.length > 0) {
         this.problemTreeSelectList = item.children;
       } else {
         this.problemTreeSelect = item.id;
       }
+      this.name = ''
+      this.problemTreeSelectConfirmList.map((m,i) => {
+        if(i<2){
+          this.name = this.name + m.itemname + '>'
+        }else{
+          this.name = this.name + m.itemname
+        }
+      })
       this.$emit("select", this.problemTreeSelectConfirmList);
     },
+    styles(item, index){
+      if(index == 0) {
+        this.w1 = item.itemname.length * 18
+        return `left: 18px;width: ${item.itemname.length * 18}px;height: 20px;top: 22px;`
+      }
+      if(index == 1) {
+        return `left: ${this.w1 + 18}px;width: ${item.itemname.length * 18}px;height: 20px;top: 22px;`
+      }
+    },
     handleClick(item) {
-      console.log(item);
       const selectIndex = this.problemTreeSelectConfirmList.indexOf(item);
       const index =
         selectIndex - 1 < 0
@@ -131,7 +149,14 @@ export default {
           ])
         );
       }
-      console.log(this.problemTreeSelectConfirmList);
+      this.name = ''
+      this.problemTreeSelectConfirmList.map((m,i) => {
+        if(i<2){
+          this.name = this.name + m.itemname + '>'
+        }else{
+          this.name = this.name + m.itemname
+        }
+      })
     },
   },
   onReady() {},
@@ -175,8 +200,9 @@ page {
   display: flex;
   align-items: center;
   justify-content: left;
-  overflow-x: auto;
+  overflow-x: hidden;
   flex-wrap: nowrap;
+  position: relative;
 }
 
 ::v-deep ::-webkit-scrollbar {
@@ -202,4 +228,5 @@ page {
     box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
     background-color: #dad8d8 !important;
 }
+    
 </style>