做网站怎样赚钱,合肥搜索引擎优化,河南网站建设多少钱,美容网站制作#x1f9d1;#x1f4bb; 写在开头 点赞 收藏 学会#x1f923;#x1f923;#x1f923;
需求简介
轮播图是我们前端开发中的一个常见需求#xff0c;在项目开发中#xff0c;我们可以使用element、ant等UI库实现。某些场景#xff0c;为了一个简单的功能安装一… 写在开头 点赞 收藏 学会
需求简介
轮播图是我们前端开发中的一个常见需求在项目开发中我们可以使用element、ant等UI库实现。某些场景为了一个简单的功能安装一个库是没必要的我们最好的选择就是手搓。 我们来看一个需求 上述需求核心就是实现一个无缝轮播的切换效果。以这个需求为例我们看看最终实现效果
实现思路
要想实现一个无缝的轮播效果其实非常简单核心思想就是动态改变显示的列表而已。比如我们有这样一个数组
const list ref([{ name: 1, id: 1 }, { name: 2, id: 2 },{ name: 3, id: 3 }
])
如果我们想无缝切换的展示这个数据最简单的代码就是动态的改变下面的代码的index
templatediv{{ list[index] }}/div
/template
script setupconst index ref(0)const list ref([{ name: 1, id: 1 }, { name: 2, id: 2 }, { name: 2, id: 2 }])
scriptp
那如何实现切换的样式呢也非常简单我们只要给元素添加一个出现样式和离开样式即可。现在我们来具体实现这样一个需求。
技术方案
数据的动态切换
要想实现一个数据的动态循环切换效果是非常容易的
templatediv v-for(build, index) in list :keyindexdiv v-showindex 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 classmain-contentTransition v-for(build, index) in list :keyselectIndexdiv classbanner-scroll-wrap v-showindex 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 langless 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 classmain-content mouseenterstop() mouseleavestart()Transition v-for(build, index) in list :keyselectIndexdiv classbanner-scroll-wrap v-showindex 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 langless 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;
}
时间原因本教程也没有对技术上做深究也希望各位大佬能提供自己的思路与建议感谢大家分享
如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
