深圳住房和建设局官网站首页,phpcms网站title,外贸网站和内贸,图书管理系统网站开发设计过程一、需求描述
今天看到一个设计需求#xff1a;需要在弹框中显示如下界面#xff0c;其中有两个效果#xff1a; 1.顶部点击项目#xff0c;下面的内容能相应滚动定位#xff0c;同时滚动的时候顶部项目也能相应激活显示 2.顶部右侧有一个模糊渐变效果#xff0c;并且要…一、需求描述
今天看到一个设计需求需要在弹框中显示如下界面其中有两个效果 1.顶部点击项目下面的内容能相应滚动定位同时滚动的时候顶部项目也能相应激活显示 2.顶部右侧有一个模糊渐变效果并且要保证不影响项目的点击
二、功能实现
第一点实现很简单核心代码如下
div classdrug-detail-contentvan-tabs v-model:activeactive click-tabhandleTabClickvan-tab v-fori in [适用症, 包装规格, 用法用量, 不良反应, 禁忌事项] :title${i}/van-tab/van-tabsdiv reftabContentRef classtabs-contentdiv classtab-title适用症/divdiv classtab-content/divdiv classtab-title包装规格/divdiv classtab-content/divdiv classtab-title用法用量/divdiv classtab-content/divdiv classtab-title不良反应/divdiv classtab-content/divdiv classtab-title禁忌事项/divdiv classtab-content/div/div/divconst 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 trueele?.scrollIntoView()
}const show () {visiable.value truenextTick(() {useEventListener(tabContentRef.value, scroll, useDebounceFn(() {if(isClick) {isClick falsereturn ;}const scrollTop tabContentRef.value?.scrollTopconst 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[i1]})}}, 300))})
}第二点它的实现就得提到我们今天要说的pointer-events: none;
先看一下实现的效果 可以看到我们利用伪元素::after在wrap的右侧覆盖了带渐变背景的层
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. 参考How to Prevent Elements Receiving Click Events With CSS
