当前位置: 首页 > news >正文

java做网站开发书哈尔滨优化网站公司

java做网站开发书,哈尔滨优化网站公司,机票便宜 网站建设,网站数据分离 怎么做🧑‍💻 写在开头 点赞 收藏 学会🤣🤣🤣 需求简介 轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用element、ant等UI库实现。某些场景,为了一个简单的功能安装一…

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

需求简介

轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用element、ant等UI库实现。某些场景,为了一个简单的功能安装一个库是没必要的,我们最好的选择就是手搓。
在这里插入图片描述
我们来看一个需求
在这里插入图片描述
上述需求核心就是实现一个无缝轮播的切换效果。以这个需求为例,我们看看最终实现效果:
在这里插入图片描述

实现思路

要想实现一个无缝的轮播效果,其实非常简单,核心思想就是动态改变显示的列表而已。比如我们有这样一个数组

const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 },{ name: 3, id: 3 }
])

如果我们想无缝切换的展示这个数据,最简单的代码就是动态的改变下面的代码的index

<template><div>{{ list[index] }}</div>
</template>
<script setup>const index = ref(0)const list = ref([{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 2, id: 2 }])
<scriptp>

那如何实现切换的样式呢?也非常简单,我们只要给元素添加一个出现样式和离开样式即可。现在,我们来具体实现这样一个需求。

技术方案

数据的动态切换

要想实现一个数据的动态循环切换效果,是非常容易的:

<template><div v-for="(build, index) in list" :key="index"><div v-show="index === selectIndex">卡片自定义内容</div></div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref([{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)// #计时器实例
let timer: any = null// >计时器逻辑
const timeFuc = () => {timer = setInterval(() => {// 更改选中的indexif (selectIndex.value >= list.value.length - 1) {selectIndex.value = 0} else {selectIndex.value++}}, 5000)
}timeFuc()
<scriptp>

上述代码中,我们设置了一个定时器,定时器每5s执行一次,每次执行都会动态更改当前要显示的数据索引值,当索引值达到最大实,在将其重置。通过上述的简单代码,我们就实现了一个可以自动切换的循环渲染的卡片。

动画添加

要想实现最终效果的动态效果也非常容易,我们只需要给每个元素出现时设置一些样式,离开时设置一些样式即可。借助vue的Transition组件,我们能很容易实现这样一个效果。

如果你不了解vue的Transition组件,请去官网补充下知识:cn.vuejs.org/guide/built…

<template>
<div class="main-content"><Transition v-for="(build, index) in list" :key="selectIndex"><div class="banner-scroll-wrap" v-show="index === selectIndex">卡片自定义内容</div></Transition>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref([{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)// #计时器实例
let timer: any = null// >计时器逻辑
const timeFuc = () => {timer = setInterval(() => {// 更改选中的indexif (selectIndex.value >= list.value.length - 1) {selectIndex.value = 0} else {selectIndex.value++}}, 5000)
}timeFuc()
<scriptp>
<style lang="less" scoped>
.main-content {position: relative;height: 100%;.banner-scroll-wrap {position: absolute;top: 0;bottom: 0;right: 0;left: 0;}
}.v-enter-from {transform: translateX(100%);opacity: 0;
}.v-enter-active,
.v-leave-active {transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
}.v-enter-to {transform: translateX(0);opacity: 1;
}.v-leave-from {transform: translateX(0);opacity: 1;
}.v-leave-to {transform: translateX(-100%);opacity: 0;
}
<style/>

上述代码中,由于 selectIndex是动态的,元素不断地在显示与隐藏。因此,Transition标签的进入样式和离开样式会动态触发,从而形成切换效果。

v-enter是元素的进入样式,进入时,我们从最右边偏移100%的距离到正常位置,透明度从0到1,这个过程持续0.6s,实现了元素左移淡入的效果。

v-leave是元素的离开样式,离开时,我们从正常位置偏移到100%的左侧位置,透明度从1到0,这个过程持续0.6s,实现了元素左移淡出的效果。

在这些类的共同作用下,我们实现了元素的动态切换。
你可能注意到了我给元素设置了一个banner-scroll-wrap类名,并使用了position: absolute,这样设置的注意目的是保证切换离开元素的淡出效果和进入元素的淡入效果是连贯的。如果你不这样写,可能会出现样式问题。
此外,注意我给Transition设置了key=“Transition”,这样些会保证每次数据在切换时,transition能够重新渲染,触发元素离开和进入的样式。
至此,我们就完成了基本功能样式
在这里插入图片描述

轮播的停止与恢复

很常见的一种情况就是我们需要鼠标放在卡片上时停止轮播,离开卡片的时候恢复轮播,这非常容易。

<template>
<div class="main-content"  @mouseenter="stop()" @mouseleave="start()"><Transition v-for="(build, index) in list" :key="selectIndex"><div class="banner-scroll-wrap" v-show="index === selectIndex">卡片自定义内容</div></Transition>
</div>
</template>
<script setup>
const selectIndex = ref(0)
const list = ref([{ name: "卡片1", id: 1 }, { name: "卡片1", id: 2 }, { name: "卡片1", id: 2 }]
)// #计时器实例
let timer: any = null// >计时器逻辑
const timeFuc = () => {timer = setInterval(() => {// 更改选中的indexif (selectIndex.value >= list.value.length - 1) {selectIndex.value = 0} else {selectIndex.value++}}, 5000)
}// >开启轮播const start = () => {if (timer) returntimeFuc()}// >关闭轮播const stop = () => {clearInterval(timer)timer = null}timeFuc()
<scriptp>
<style lang="less" scoped>
<style/>

解决重影问题

在某些情况下,我们离开这个页面很久后(浏览器切换到其他选项卡),然后在切回来的时候,可能会出现短暂的画面重影问题,这个问题也很好解决,加上下面的代码即可

<script setup>//...// 解决切屏后重影的问题onMounted(() => {document.addEventListener('visibilitychange', () => {// 用户息屏、或者切到后台运行 (离开页面)if (document.visibilityState === 'hidden') {stop()}// 用户打开或回到页面if (document.visibilityState === 'visible') {start()}})})onBeforeUnmount(() => stop())<scriptp>

visibilitychange 事件:当其选项卡的内容变得可见或被隐藏时,会在 document 上触发 visibilitychange 事件。该事件不可取消。

总结

在本教程中,我们通过简单代码实现了无缝轮播效果,样式是左右切换,我们也可以通过样式控制实现上下切换的效果,比如将translateX设置为translateY即可。

 .v-enter-from {transform: translateY(100%);opacity: 0;
}

时间原因,本教程也没有对技术上做深究,也希望各位大佬能提供自己的思路与建议,感谢大家分享!

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
在这里插入图片描述

http://www.ritt.cn/news/23068.html

相关文章:

  • php网站怎么做静态化网站百度收录批量查询
  • net网站开发net网站开发手机seo百度点击软件
  • 手机网站开发点击bug百度热搜广告设计公司
  • 深圳网站建设seo五种关键词优化工具
  • 哪些购物网站用php做的营销官网
  • 浙江专业网站建设商城报价免费的推广软件下载
  • 国家城乡与住房建设部网站河南网站seo
  • 新加坡网站制作2345浏览器下载
  • 中铁建设集团公司门户百度关键词优化多少钱一年
  • 申请免费建站百度推广app下载
  • 北京有名的设计公司有哪些windows优化大师win10
  • 做网站建设的公司产品网络营销方案
  • 建设网站费用计入什么科目百度学术查重
  • 东莞网站建设推广费用seo五大经验分享
  • 为什么有的网站打不开 别的网站就可以打开网站seo推广公司靠谱吗
  • 番禺品牌型网站建设口碑营销理论
  • 中学网站asp模板泉州网站seo公司
  • 网站模板设计师要求网页搜索引擎
  • 做一个网站需要哪些上海百度推广公司排名
  • 最权威的做网站的公司哪家好免费广告投放网站
  • 无经验能做sem专员四川网站seo
  • 自己开网站能赚钱吗山东网站seo
  • 专业做网站app的公司哪家好国外新闻最新消息
  • 百度?o法提交网站网络推广团队
  • 网站建设方式国际新闻最新消息十条摘抄
  • 宿州网站开发建设百度一下搜索
  • 网页编辑哪个键杭州seo泽成
  • 怎么做网站frontpage2022年新闻大事
  • 手机网站域名哪里注册快手流量推广网站
  • aspnet网站开发作业青岛网站制作公司