选择导航栏换行

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

@@ -8,15 +8,16 @@
       <!--      </uni-breadcrumb>-->
 
       <view class="breadcrumb" :style="problemTreeSelectConfirmList.length > 0 ? 'padding:40rpx;': ''">
-        <view
+       
+       <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:''
     };
   },
   // 页面加载
@@ -80,7 +83,7 @@ export default {
           if (res.code == 200) {
             this.originList =JSON.parse(JSON.stringify( res.result));
             this.problemTreeSelectList =JSON.parse(JSON.stringify( res.result));
-			this.problemTreeSelectAllList=JSON.parse(JSON.stringify( res.result))
+			      this.problemTreeSelectAllList=JSON.parse(JSON.stringify( res.result))
             // if(this.hiddenDangerList2.length>0) {
             //   // this.problemTreeSelectConfirmList = this.hiddenDangerList2
             //   console.log(this.hiddenDangerList2)
@@ -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,31 +200,33 @@ page {
   display: flex;
   align-items: center;
   justify-content: left;
-  overflow-x: auto;
+  overflow-x: hidden;
   flex-wrap: nowrap;
+  position: relative;
 }
 
 ::v-deep ::-webkit-scrollbar {
-        // 滚动条整体样式
+    // 滚动条整体样式
-        display: block;
+    display: block;
-        width: 20rpx !important;
+    width: 20rpx !important;
-        height: 20rpx !important;
+    height: 20rpx !important;
-        -webkit-appearance: auto !important;
+    -webkit-appearance: auto !important;
-        background: transparent;
+    background: transparent;
-        overflow: auto !important;
+    overflow: auto !important;
-    }
+}
-     
+  
-    ::v-deep ::-webkit-scrollbar-thumb {
+::v-deep ::-webkit-scrollbar-thumb {
-        // 滚动条里面小方块
+    // 滚动条里面小方块
-        border-radius: 20rpx !important;
+    border-radius: 20rpx !important;
-        box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
+    box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
-        background-color: #f7f7f7 !important;
+    background-color: #f7f7f7 !important;
-    }
+}
-     
+  
-    ::v-deep ::-webkit-scrollbar-track {
+::v-deep ::-webkit-scrollbar-track {
-        // 滚动条
+    // 滚动条
-        border-radius: 20rpx !important;
+    border-radius: 20rpx !important;
-        box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
+    box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
-        background-color: #dad8d8 !important;
+    background-color: #dad8d8 !important;
-    }
+}
+    
 </style>