【发布时间】：2021-03-02 14:48:33
【问题描述】：
在我的应用程序中，有多个卡片和左/右桨。对于台式机/笔记本电脑中的正常浏览（safari、firefox、chrome），当鼠标悬停在这些卡片上时，左/右拨片是可见的。在这些卡片中，所有链接/超链接在台式机/笔记本电脑中都可以正常工作
我正在使用@mouseover 来显示这些拨片来滚动这些卡片。在 ipad（触摸设备）中，会出现该问题。因为悬停效果在触控设备中不起作用。
问题
- 这些拨片只有在第一次点击后才可见，因为悬停不适用于触控设备。
所以，我想禁用触摸设备的悬停并在第一次渲染时显示拨片。我检查了媒体查询，但它不起作用。我没有使用 jquery。那么，如何使用 vue js 在触摸设备的初始加载时显示这些拨片。
代码 sn-p
<div
v-show="grid"
class="second-row"
@mouseover="showPaddle"
@scroll.passive="setScrolledLeft"
>
<div class="paddles">
<button
v-if="showRightPaddle"
tabindex="-1"
class="right-paddle paddle"
@click="scrollCards('right')"
>
<i class="el-icon-arrow-right-fill" />
</button>
<button
v-if="showLeftPaddle"
tabindex="-1"
class="left-paddle paddle"
@click="scrollCards('left')"
>
<i class="el-icon-arrow-left-fill" />
</button>
</div>
....card details html
</div>
方法代码 sn-p 显示 Paddle
showPaddle() {
const secondRowEl = this.$el.querySelector('.second-row');
const gridWidth = this.$el.querySelector('.grid').clientWidth;
const scrollMax = gridWidth - secondRowEl.clientWidth;
if (gridWidth > secondRowEl.clientWidth) {
if (secondRowEl.scrollLeft > 0 && secondRowEl.scrollLeft < scrollMax) {
this.showLeftPaddle = true;
this.showRightPaddle = true;
} else if (secondRowEl.scrollLeft >= scrollMax) {
this.showLeftPaddle = true;
this.showRightPaddle = false;
} else if (secondRowEl.scrollLeft <= 0) {
this.showLeftPaddle = false;
this.showRightPaddle = true;
}
} else {
this.showLeftPaddle = false;
this.showRightPaddle = false;
}
}
Css 样式
.second-row {
margin: 0 auto;
padding: 0 0 0 4px;
overflow-y: hidden;
background: var(--gray40);
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
&:hover,
&:focus {
.paddles {
display: block;
}
}
.paddles {
display: none;
.paddle {
border: none;
padding: 0;
height: 100px;
width: 50px;
cursor: pointer;
position: fixed;
margin-top: 33vh;
z-index: 10;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-size: 2.5em;
color: #333333;
background-color: rgba(204, 204, 204, 0.5);
&:hover {
background-color: rgba(204, 204, 204, 0.65);
}
&:focus {
background-color: rgba(204, 204, 204, 0.8);
}
border-radius: 50px;
}
.left-paddle {
&.paddle {
> i {
margin-left: -10px;
font-size: 44px;
position: relative;
top: 2px;
}
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.right-paddle {
right: 0;
&.paddle {
> i {
margin-right: -10px;
font-size: 44px;
position: relative;
top: 2px;
}
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.hidden {
display: none;
}
.grid {
display: block;
&.product-grid {
position: relative;
height: calc(100vh - 194px);
margin-bottom: 0;
.item {
position: absolute;
width: rem(442);
padding-right: rem(8);
margin: 0;
&.highlight {
border: 1px solid #66afe9;
border-radius: rem(4);
outline: 0;
box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
0 0 2px rgba(102, 175, 233, 0.6);
-moz-box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
0 0 2px rgba(102, 175, 233, 0.6);
-webkit-box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
0 0 2px rgba(102, 175, 233, 0.6);
}
.app-card {
.app-card__header {
padding: 0.25rem 0.75rem;
i {
position: relative;
top: rem(3);
}
.app-card__title {
&:first-child {
margin-left: 0;
}
}
.app-card__expand-icon {
margin-right: 0;
margin-top: 0.5rem;
height: 1rem;
right: 0.75rem;
i {
position: static;
color: var(--gray70);
}
}
}
}
}
}
}
}
您能否帮助禁用触摸设备的悬停效果并在初始渲染时显示拨片？
【问题讨论】：
标签： javascript css ios vue.js