一、需求描述
今天看到一个设计需求:需要在弹框中显示如下界面,其中有两个效果:
1.顶部点击项目,下面的内容能相应滚动定位,同时滚动的时候顶部项目也能相应激活显示
2.顶部右侧有一个模糊渐变效果,并且要保证不影响项目的点击
二、功能实现
第一点,实现很简单,核心代码如下:
html
<div class="drug-detail-content">
<van-tabs v-model:active="active" @click-tab="handleTabClick">
<van-tab v-for="i in ['适用症', '包装规格', '用法用量', '不良反应', '禁忌事项']" :title="`${i}`"></van-tab>
</van-tabs>
<div ref="tabContentRef" class="tabs-content">
<div class="tab-title">适用症</div>
<div class="tab-content">
</div>
<div class="tab-title">包装规格</div>
<div class="tab-content">
</div>
<div class="tab-title">用法用量</div>
<div class="tab-content">
</div>
<div class="tab-title">不良反应</div>
<div class="tab-content">
</div>
<div class="tab-title">禁忌事项</div>
<div class="tab-content">
</div>
</div>
</div>
js
const visiable = ref(false)
const active = ref(0)
import { useEventListener, useDebounceFn } from '@vueuse/core'
const tabContentRef = ref()
let isClick = false // 防止点击引起的内容区滚动影响tab激活
const handleTabClick = ({name}) => {
const ele = tabContentRef.value.getElementsByClassName('tab-title')[name]
isClick = true
ele?.scrollIntoView()
}
const show = () => {
visiable.value = true
nextTick(() => {
useEventListener(tabContentRef.value, 'scroll', useDebounceFn(() => {
if(isClick) {
isClick = false
return ;
}
const scrollTop = tabContentRef.value?.scrollTop
const eles = tabContentRef.value?.getElementsByClassName('tab-title')
if(eles) {
const tops = []
Array.from(eles)?.map(o => {
tops.push(o.offsetTop - 20)
})
active.value = tops.findIndex((v, i) => {
return v <= scrollTop && scrollTop < tops[i+1]
})
}
}, 300))
})
}
第二点,它的实现,就得提到我们今天要说的pointer-events: none;
先看一下实现的效果:
可以看到我们利用伪元素::after,在wrap的右侧覆盖了带渐变背景的层:
css
background-image: linear-gradient(90deg,hsla(0,0%,100%,.5),#fff);
为了不让这个层影响我们点击后面的tab,这里重点需要对这个伪元素的层设置pointer-events: none;
,它在这里起到一种点击"击穿"的效果:
By setting pointer-events to none, the element becomes "transparent" to pointer events, meaning it won't capture any clicks or other pointer interactions, and they'll pass through to the element behind it.