修改布局 切换滚动

src/views/home.vue

@@ -79,11 +79,14 @@
           </p>
         </div>
 
-        <div class="box_section box_5" v-focusable>
+        <div class="box_section box_5" ref="box_section">
           <div
             class="information"
             v-for="(item, index) in infoData"
             :key="index"
+            @onFocus="mationFocus(item.index, $event)"
+            @down="mationDown(item.index, $event)"
+            v-focusable
           >
             <p
               style="
@@ -160,6 +163,7 @@ export default {
   data() {
     return {
       active: 0,
+      state: 0,
       navData: [
         { name: "首页", index: 0 },
         { name: "农民夜校", index: 1 },
@@ -171,14 +175,22 @@ export default {
       ],
       infoData: [
         {
+          index: 0,
           info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...",
           print: require("../assets/img/Rectangle2221.png"),
         },
         {
+          index: 1,
           info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...",
           print: require("../assets/img/Rectangle2221.png"),
         },
         {
+          index: 2,
+          info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...",
+          print: require("../assets/img/Rectangle2221.png"),
+        },
+        {
+          index: 3,
           info: "近日，剑阁县龙源镇纪委联合镇疫情防控领导专班深入场镇干单位、村（社区）开展疫...",
           print: require("../assets/img/Rectangle2221.png"),
         },
@@ -195,7 +207,7 @@ export default {
     this.$nextTick(() => {
       this.$tv.reset();
       this.$tv.focusClassName = "box_focusable"; // 选中的class
-    //   this.$tv.init({ distanceToCenter: true }); // 焦点居中
+      //   this.$tv.init({ distanceToCenter: true }); // 焦点居中
       //   this.$tv.setScrollEl(document.querySelector(".home_nav")); // 设置滚动的div
       //   this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="nav_li"]')); // 初始化div聚焦
     });
@@ -227,7 +239,7 @@ export default {
       }
       this.active = index;
       this.$tv.requestFocus(document.querySelector(`.tab_nav_${index + 1}`));
-    //   console.log(this.active);
+      //   console.log(this.active);
     },
 
     navLeft(index) {
@@ -237,7 +249,7 @@ export default {
         this.active = index;
         this.$tv.requestFocus(document.querySelector(`.tab_nav_${index - 1}`));
       }
-    //   console.log(event.target, "left");
+      //   console.log(event.target, "left");
       console.log(this.active);
     },
 
@@ -256,6 +268,24 @@ export default {
         false
       );
     },
+
+    mationFocus(index) {
+      //切换滚动元素到menu
+      this.state = index;
+      this.$tv.setScrollEl(
+         this.$refs.box_section
+        // this.$tv.getElementByPath("//div[@class='box_section']")
+      );
+    },
+
+    mationDown(i, event) {
+      //在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦
+      if (i == this.infoData.length) {
+        this.$tv.requestFocus(event.target);
+      }
+      console.log(event.target);
+      console.log("111");
+    },
   },
 };
 </script>
@@ -286,7 +316,7 @@ p {
     transform: scale(1.04);
     box-sizing: border-box;
     overflow: hidden;
-    border: solid #FFA564;
+    border: solid #ffa564;
   }
 
   // 轮播图
@@ -320,10 +350,10 @@ ul {
   color: #798190;
   font-size: 18px;
   display: flex;
-}
+  li {
-li {
+    width: 148px;
-  width: 148px;
+    text-align: center;
-  text-align: center;
+  }
 }
 
 .nav_li {
@@ -339,12 +369,7 @@ li {
   margin: 0;
   height: 511px;
 }
-.information {
+
-  display: flex;
-  align-items: center;
-  height: 67px;
-  margin-bottom: 16px;
-}
 .scenic {
   position: relative;
   width: 300px;
@@ -380,10 +405,19 @@ li {
   height: 221px;
   box-sizing: border-box;
   padding: 16px;
-  overflow-y: hidden;
   border-radius: 10px;
   background: linear-gradient(180deg, #163d7e 0%, #1d3256 100%);
+
+  .information {
+    width: 100%;
+    height: 67px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+  }
 }
+
 figure {
   width: 118px;
   height: 172px;