xiaxiaoli
/
vue-tv-focusable
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加大屏的跳转功能以及修改bug

master
lillillli 3 years ago
parent
d5f0140086
commit
267ed74e52
5 changed files with 198 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/01.png
  2. BIN
      src/assets/img/Group1618.png
  3. 4
      src/components/TimeComponent.vue
  4. 184
      src/views/home.vue
  5. 133
      src/views/homeInfo.vue

BIN
src/assets/img/01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
src/assets/img/Group1618.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

4
src/components/TimeComponent.vue
View File

@ -22,7 +22,7 @@
<div> <div>
<p>{{ high }}-{{ low }}</p> <p>{{ high }}-{{ low }}</p>
<div style="display: flex"> <div style="display: flex">
<p style="flex: 1">剑阁</p> <p style="flex: 1">{{cityName.city}}</p>
<p>{{ currentWeather.type }}</p> <p>{{ currentWeather.type }}</p>
</div> </div>
</div> </div>
@ -41,6 +41,7 @@ export default {
currentWeather: {}, //当前天气 currentWeather: {}, //当前天气
high: "", high: "",
low: "", low: "",
cityName:{},
}; };
}, },
mounted() { mounted() {
@ -55,6 +56,7 @@ export default {
this.currentWeather = response.data.data.yesterday; this.currentWeather = response.data.data.yesterday;
this.high = this.currentWeather.high.slice(3); this.high = this.currentWeather.high.slice(3);
this.low = this.currentWeather.low.slice(3); this.low = this.currentWeather.low.slice(3);
this.cityName= response.data.data
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);

184
src/views/home.vue
View File

@ -9,48 +9,57 @@
<TimeComponent /> <TimeComponent />
</div> </div>
<!-- 导航栏 --> <!-- 导航栏 -->
<nav style="width: 100%; height: 70px"> <div style="width: 100%; height: 70px" class="home_nav">
<ul> <ul>
<li <li
v-for="(item, index) in navData" v-for="item in navData"
:class="{ nav_li: active === index }" :class="[active === item.index && 'nav_li', `tab_nav_${item.index}`]"
:key="index" :key="item.index"
@onFocus="navFocus(item.index)"
@right="navRight(item.index, $event)"
@left="navLeft(item.index, $event)"
@down="navDown(item.index, $event)"
v-focusable
> >
{{ item.name }} 　　　　 {{ item.name }} 　　　　
</li> </li>
</ul> </ul>
</nav> </div>
<article class="home_article"> <article v-if="active === 0" class="home_article">
<section style="width: 520px" class="border"> <section style="width: 520px" class="border">
<div class="home_slideshow"> <!-- 轮播图 -->
<swiper> <div
<!-- <swiper-slide v-for="(item, index) in swiperList" :key="index"> class="home_slideshow box_0"
<div class="swiper-item"> @down="moveToIndex(1)"
<img @right="moveToIndex(3)"
class="swiper-image" @up="moveToTop"
:src="item.url" v-focusable
style="cursor: pointer; width: 520px; height: 393px" >
/> <img src="../assets/img/Group1618.png" alt="" />
</div>
</swiper-slide> -->
</swiper>
</div> </div>
<div class="home_inform"> <div class="home_inform">
<div <div
class="home_informOverall" class="home_informOverall box_1"
style=" style="
background: linear-gradient(180deg, #32b3c5 0%, #2f948e 100%); background: linear-gradient(180deg, #32b3c5 0%, #2f948e 100%);
" "
@top="moveToIndex(0)"
@right="moveToIndex(2)"
v-focusable
> >
<img src="../assets/img/Frame01.png" alt="" /> <img src="../assets/img/Frame01.png" alt="" />
<p style="width: 138px">通知信息</p> <p style="width: 138px">通知信息</p>
</div> </div>
<div <div
class="home_informOverall" class="home_informOverall box_2"
style=" style="
background: linear-gradient(180deg, #367fc4 0%, #1c52ad 100%); background: linear-gradient(180deg, #367fc4 0%, #1c52ad 100%);
" "
@click="skip()"
@top="moveToIndex(0)"
@left="moveToIndex(1)"
v-focusable
> >
<img src="../assets/img/Frame02.png" alt="" /> <img src="../assets/img/Frame02.png" alt="" />
<p style="width: 138px">雪亮工程</p> <p style="width: 138px">雪亮工程</p>
@ -59,21 +68,20 @@
</section> </section>
<section style="width: 304px" class="border"> <section style="width: 304px" class="border">
<div class="scenic"> <div class="scenic box_3" v-focusable @up="moveToTop">
<p class="_overall" style="background-color: rgb(0 0 0 / 46%)"> <p class="_overall" style="background-color: rgb(0 0 0 / 46%)">
文化宣传 文化宣传
</p> </p>
</div> </div>
<div class="publicity"> <div class="publicity box_4" v-focusable>
<p class="_overall" style="background-color: rgb(0 0 0 / 53%)"> <p class="_overall" style="background-color: rgb(0 0 0 / 53%)">
景区风采 景区风采
</p> </p>
</div> </div>
<div class="box_section" @down="menuDown(item, $event)"> <div class="box_section box_5" v-focusable>
<div <div
class="information" class="information"
v-focusable
v-for="(item, index) in infoData" v-for="(item, index) in infoData"
:key="index" :key="index"
> >
@ -97,15 +105,20 @@
<div style="display: flex"> <div style="display: flex">
<div style="text-align: center; margin-right: 20px"> <div style="text-align: center; margin-right: 20px">
<figure <figure
class="box_6"
style=" style="
background: linear-gradient(180deg, #e3b233 0%, #e17e22 100%); background: linear-gradient(180deg, #e3b233 0%, #e17e22 100%);
" "
v-focusable
@up="moveToTop"
> >
<img src="../assets/img/Vector01.png" /> <img src="../assets/img/Vector01.png" />
<figcaption style="color: #ffffff">疫情防控</figcaption> <figcaption style="color: #ffffff">疫情防控</figcaption>
</figure> </figure>
<figure <figure
class="box_7"
v-focusable
style=" style="
background: linear-gradient(180deg, #3db542 0%, #178636 100%); background: linear-gradient(180deg, #3db542 0%, #178636 100%);
margin-top: 20px; margin-top: 20px;
@ -116,15 +129,15 @@
</figure> </figure>
</div> </div>
<div <div
style=" style="width: 218px; height: 364px; border-radius: 10px"
width: 218px; class="right_rotation box_8"
height: 364px; v-focusable
border: solid red; @up="moveToTop"
border-radius: 10px; >
" <img src="../assets/img/01.png" alt="" />
></div> </div>
</div> </div>
<div class="right_section"> <div class="right_section box_9" v-focusable>
<div class="right_sectionBox"> <div class="right_sectionBox">
<div class="right_sectionNest"> <div class="right_sectionNest">
<p>剑阁县推广大豆＋玉米兼容发展 “一地双丰收”模式</p> <p>剑阁县推广大豆＋玉米兼容发展 “一地双丰收”模式</p>
@ -134,27 +147,27 @@
</div> </div>
</section> </section>
</article> </article>
<div v-if="active === 1">111</div>
</div> </div>
</template> </template>
<script> <script>
// import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// import "swiper/css/swiper.css";
export default { export default {
name: "Home", name: "Home",
data() { data() {
return { return {
active: 0, active: 0,
navData: [ navData: [
{ name: "首页" }, { name: "首页", index: 0 },
{ name: "农民夜校" }, { name: "农民夜校", index: 1 },
{ name: "慢直播" }, { name: "慢直播", index: 2 },
{ name: "党建引领" }, { name: "党建引领", index: 3 },
{ name: "资讯服务" }, { name: "资讯服务", index: 4 },
{ name: "办事指南" }, { name: "办事指南", index: 5 },
{ name: "我的服务" }, { name: "我的服务", index: 6 },
], ],
infoData: [ infoData: [
{ {
@ -177,34 +190,71 @@ export default {
], ],
}; };
}, },
// components: {
// Swiper,
// SwiperSlide,
// directive,
// },
created() { created() {
this.$nextTick(() => { this.$nextTick(() => {
console.log(this.$tv);
this.$tv.reset(); this.$tv.reset();
this.$tv.setScrollEl(document.querySelector(".box_section")); this.$tv.focusClassName = "box_focusable"; // 选中的class
// this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="demo"]')); // this.$tv.init({ distanceToCenter: true }); // 焦点居中
// this.$tv.requestFocus(this.$refs.fo5); // this.$tv.setScrollEl(document.querySelector(".home_nav")); // 设置滚动的div
// this.$tv.setScrollEl(this.$tv.getElementByPath('//div[@class="nav_li"]')); // 初始化div聚焦
}); });
}, },
mounted() {
this.$tv.requestFocus(document.querySelector(`.tab_nav_0`));
},
destroyed() { destroyed() {
// 由于设置的全局的init，为了不影响别的界面交互，销毁的时候，init里面的数据重置成全局的数据 // 组件销毁，重置distanceToCenter的默认值，默认：false
this.$tv.resetScrollEl(); this.$tv.init({ distanceToCenter: false });
// this.$tv.distanceToCenter = false;
}, },
methods: { methods: {
menuDown(item) { // 点击跳转
// console.log(item,event); skip() {
//在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦 this.$router.push({ path: "/homeInfo" });
// if (item == 10) { },
// this.$tv.requestFocus(event.target);
// } navFocus(index) {
// console.log(index);
this.active = index;
},
navRight(index, event) {
console.log(index, event);
if (index == this.navData.length - 1) {
return;
}
this.active = index;
this.$tv.requestFocus(document.querySelector(`.tab_nav_${index + 1}`));
// console.log(this.active);
},
navLeft(index) {
if (index <= 0) {
return;
} else {
this.active = index;
this.$tv.requestFocus(document.querySelector(`.tab_nav_${index - 1}`));
}
// console.log(event.target, "left");
console.log(this.active);
},
navDown() {
this.$tv.requestFocus(document.querySelector(`.box_0`));
},
// 拿到对应calss
moveToIndex(index) {
this.$tv.requestFocus(document.querySelector(`.box_${index}`));
},
moveToTop() {
this.$tv.requestFocus(
this.$tv.requestFocus(document.querySelector(`.tab_nav_0`)),
false
);
}, },
}, },
}; };
@ -231,11 +281,18 @@ p {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
// 边框样式
.box_focusable {
transform: scale(1.04);
box-sizing: border-box;
overflow: hidden;
border: solid #FFA564;
}
// 轮播图 // 轮播图
.home_slideshow { .home_slideshow {
width: 520px; width: 520px;
height: 390px; height: 390px;
border: solid red;
border-radius: 10px; border-radius: 10px;
} }
// 通知信息 // 通知信息
@ -366,5 +423,12 @@ figure {
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
} }
.focus {
transform: scale(1.2);
border: 2px solid red;
box-shadow: 0 0 20px red;
font-size: 28px;
}
} }
</style> </style>

133
src/views/homeInfo.vue
View File

@ -13,45 +13,32 @@
<div class="menu"> <div class="menu">
<!-- onFocus:聚焦 up:上 down:下 right:右 v-focusable--> <!-- onFocus:聚焦 up:上 down:下 right:右 v-focusable-->
<div <div
v-focusable
@onFocus="menuFocus(i)" @onFocus="menuFocus(i)"
@up="menuUp(i, $event)" @up="menuUp(i, $event)"
@down="menuDown(i, $event)" @down="menuDown(i, $event)"
@right="menuRight" @right="menuRight"
v-focusable
class="item"
v-for="i in list" v-for="i in list"
:key="i" :key="i"
class="menu_item"
ref="menu_item"
> >
<div <div class="status">
style=" {{ i.state == 0 ? "离线" : "在线" }}
display: flex;
height: 72px;
align-items: center;
color: #ffffff;
"
>
<div
style="
font-size: 12px;
border: 1px solid;
width: 38px;
height: 19px;
margin-left: 46px;
margin-right: 24px;
"
>
{{ i.state == 0 ? "离线" : "在线" }}
</div>
<p style="margin-left: 0">{{ i.name }}</p>
</div> </div>
<p style="margin-left: 0">{{ i.name }}</p>
</div> </div>
</div> </div>
<div v-focusable class="content" v-for="index in contentCount" :key="index" @down="contentDown(index, $event)"> <div
v-focusable
class="content"
v-for="index in contentCount"
:key="index"
>
<div <div
@onFocus="contentFocus" @onFocus="contentFocus"
@up="contentUp(index, $event)" @down="contentDown()"
@down="contentDown(index, $event)"
@left="contentLeft(index)" @left="contentLeft(index)"
class="item" class="item"
v-focusable v-focusable
@ -59,12 +46,19 @@
<img <img
src="../assets/img/bg01.png" src="../assets/img/bg01.png"
alt="" alt=""
style="width: 865px; height: 480px;" style="width: 865px; height: 480px"
/> />
</div> </div>
<div class="contentInfo"> <div
{{ currentMenu }} ref="contentInfo"
摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄 class="contentInfo"
v-focusable
@up="contentUp(index, $event)"
>
<span>
{{ currentMenu }}
摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄像头信息摄
</span>
</div> </div>
</div> </div>
</div> </div>
@ -73,9 +67,10 @@
<script> <script>
export default { export default {
name: "Example6", name: "homeInfo",
data() { data() {
return { return {
active: 0,
currentMenu: 0, currentMenu: 0,
contentCount: 1, contentCount: 1,
list: [ list: [
@ -100,15 +95,16 @@ export default {
state: 1, state: 1,
}, },
], ],
state: 0,
}; };
}, },
created() { created() {
this.$nextTick(() => { this.$nextTick(() => {
this.$tv.focusClassName = "focus"; // 选中的class
this.$tv.requestFocus( this.$tv.requestFocus(
this.$tv.getElementByPath( this.$refs.menu_item
'//div[@class="demo"]/div[@class="menu"]/div[1]' // this.$tv.getElementByPath(
) // '//div[@class="demo"]/div[@class="menu"]/div[1]'
// )
); );
}); });
}, },
@ -116,11 +112,13 @@ export default {
// 为了不影响别的界面交互，销毁的时候，如果有全局的配置属性就重置成全局配置，没有全局配置的属性就重置成系统默认的配置 // 为了不影响别的界面交互，销毁的时候，如果有全局的配置属性就重置成全局配置，没有全局配置的属性就重置成系统默认的配置
this.$tv.reset(); this.$tv.reset();
}, },
methods: { methods: {
menuFocus(i) { menuFocus(i) {
//切换滚动元素到menu //切换滚动元素到menu
this.currentMenu = i; this.currentMenu = i;
this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='menu']")); this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='menu']"));
// this.$tv.setScrollEl(this.$tv.getElementByPath("//div[@class='menu']/div[@class='item']")); // 初始化div聚焦
}, },
contentFocus() { contentFocus() {
@ -147,34 +145,30 @@ export default {
menuRight() { menuRight() {
//从menu到内容时固定到内容的第一个元素 //从menu到内容时固定到内容的第一个元素
this.$tv.requestFocus( this.$tv.requestFocus(
this.$tv.getElementByPath("//div[@class='content']/div[1]"), this.$tv.getElementByPath("//div[@class='content']/div[1]")
false
); );
}, },
contentDown(index, event) {
if (this.contentCount - index < 3) {
//如果是最后一行的内容,按下焦点不许动
this.$tv.requestFocus(event.target);
}
console.log(event);
},
contentLeft(i) { contentLeft(i) {
if (i % 3 == 1) { if (i == 1) {
//在第一列的内容上按左时，让当前menu的item聚焦 this.$tv.requestFocus(this.$refs.menu_item);
this.$tv.requestFocus(
this.$tv.getElementByPath(
`//div[@class='menu']/div[${this.currentMenu}]`
),
false
);
} }
}, },
contentUp(index, event) { contentUp(index, event) {
if (index <= 3) { console.log(index, event);
this.$tv.requestFocus(event.target); // if (index <= 3) {
} // this.$tv.requestFocus(event.target);
// }
},
contentDown() {
console.log(index);
this.$tv.requestFocus(this.$refs.contentInfo);
// if (this.contentCount - index < 3) {
// //如果是最后一行的内容,按下焦点不许动
// this.$tv.requestFocus(event.target);
// }
}, },
}, },
}; };
@ -208,7 +202,6 @@ export default {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
vertical-align: top; vertical-align: top;
border: solid red;
border-radius: 10px; border-radius: 10px;
margin-bottom: 16px; margin-bottom: 16px;
color: aliceblue; color: aliceblue;
@ -217,7 +210,7 @@ export default {
.contentInfo { .contentInfo {
width: 870px; width: 870px;
height: 92px; height: 92px;
background: #ffffff12; // background: #ffffff12;
border-radius: 5.7px; border-radius: 5.7px;
overflow: auto; overflow: auto;
text-align: justify; text-align: justify;
@ -237,24 +230,40 @@ export default {
border-right: 1px solid #ffffff63; border-right: 1px solid #ffffff63;
padding-right: 0; padding-right: 0;
.item { .menu_item {
width: 100%; width: 100%;
height: 72px; height: 72px;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
// background: rgba(255, 255, 255, 0.08);
// color: rgb(255, 165, 100);
margin-bottom: 8px; margin-bottom: 8px;
display: flex;
align-items: center;
color: #ffffff;
.status {
font-size: 12px;
border: 1px solid;
width: 38px;
height: 19px;
margin-left: 46px;
margin-right: 24px;
}
} }
} }
} }
.focus { .focus {
// transform: scale(1); // transform: scale(1);
font-size: 28px;
div, div,
p { p {
font-size: 28px;
color: #ffa564; color: #ffa564;
} }
img {
border: solid red;
width: 200px;
height: 200px;
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save