三网合一网站方案,网站建设排行公司,php创建站点,用外服务器做网站目录 前言1. Demo2. 升级Demo3. 终极Demo 前言
原先写过类似的知识点#xff1a;
详细分析el-breadcrumb 面包屑的基本知识#xff08;附Demo#xff09;详细分析el-card中的基本知识#xff08;附Demo#xff09;
本篇博客将介绍如何通过点击按钮切换不同的图片#… 目录 前言1. Demo2. 升级Demo3. 终极Demo 前言
原先写过类似的知识点
详细分析el-breadcrumb 面包屑的基本知识附Demo详细分析el-card中的基本知识附Demo
本篇博客将介绍如何通过点击按钮切换不同的图片并优化交互体验使页面更流畅、响应更快
主要的知识点
Vue 3 组件化开发 - 通过 setup 组合式 API 进行数据管理动态绑定 class - 根据当前选中的图片高亮按钮过渡动画 transition - 让图片切换更流畅图片预加载 - 避免切换时的卡顿样式优化 - 让按钮和图片展示更美观
1. Demo
最初始的版本Demo
templatediv!-- 按钮组 --div classbutton-groupbutton v-forimage in images :keyimage.id clickcurrentImage image.src{{ image.label }}/button/div!-- 动态展示图片 --div classimage-containerimg v-ifcurrentImage :srccurrentImage altDynamic Image //div/div
/templatescript setup
import { ref } from vue// 当前选中的图片
const currentImage ref(null)// 定义按钮与对应的图片路径public 目录下的图片
const images [{ id: img1, label: 图片1, src: /image1.png },{ id: img2, label: 图片2, src: /image2.png },{ id: img3, label: 图片3, src: /image3.png },{ id: img4, label: 图片4, src: /image4.png }
]
/scriptstyle scoped
.button-group {display: flex;gap: 10px;margin-bottom: 20px;
}
button {padding: 8px 12px;cursor: pointer;
}
.image-container {text-align: center;
}
img {max-width: 100%;height: auto;
}
/style截图如下 2. 升级Demo
这一版本有个缺点就是卡顿但是他的样式很好看
图片加载问题每次点击都会重新加载图片导致延迟样式导致的渲染卡顿box-shadow、border 变化可能导致重绘事件未优化Vue 响应式 ref 更新时可能导致不必要的 DOM 计算
更改相关样式以及按钮
templatediv classcontainer!-- 按钮组 --div classbutton-groupbutton v-forimage in images :keyimage.id clickcurrentImage image.src classimage-buttonimg :srcimage.src altPreview classbutton-thumbnail /span{{ image.label }}/span/button/div!-- 动态展示图片 --div classimage-containerimg v-ifcurrentImage :srccurrentImage altDynamic Image classmain-image //div/div
/templatescript setup
import { ref } from vue// 当前选中的图片
const currentImage ref(null)// 定义按钮与对应的图片路径public 目录下的图片
const images [{ id: img1, label: 图片1, src: /favicon.ico },{ id: img2, label: 图片2, src: /image2.png },{ id: img3, label: 图片3, src: /image3.png },{ id: img4, label: 图片4, src: /image4.png },{ id: img5, label: 图片5, src: /deepSeaField.png },{ id: img6, label: 图片6, src: /image2.png },{ id: img7, label: 图片7, src: /image3.png },{ id: img8, label: 图片8, src: /image4.png }
]
/scriptstyle scoped
/* 整体容器 */
.container {max-width: 800px;margin: 0 auto;text-align: center;
}/* 按钮组使用网格布局 */
.button-group {display: grid;grid-template-columns: repeat(4, 1fr); /* 4 列布局 */gap: 15px;margin-bottom: 20px;
}/* 按钮样式 */
.image-button {display: flex;flex-direction: column;align-items: center;justify-content: center;background: white;border: 2px solid #ddd;border-radius: 12px;padding: 10px;cursor: pointer;transition: all 0.3s ease-in-out;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}.image-button:hover {background: #f0f0f0;transform: scale(1.05);
}/* 按钮里的小缩略图 */
.button-thumbnail {width: 50px;height: 50px;border-radius: 8px;object-fit: cover;margin-bottom: 5px;
}/* 主要图片 */
.image-container {margin-top: 20px;
}.main-image {max-width: 100%;height: auto;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/style截图如下 后续继续整改优化
templatediv classcontainer!-- 按钮组 --div classbutton-groupbutton v-forimage in images :keyimage.id clickcurrentImage image.src classimage-buttonimg :srcimage.src altPreview classbutton-thumbnail /span{{ image.label }}/span/button/div!-- 动态展示图片 --div classimage-containerimg v-ifcurrentImage :srccurrentImage altDynamic Image classmain-image //div/div
/templatescript setup
import { ref } from vue// 当前选中的图片
const currentImage ref(null)// 定义按钮与对应的图片路径public 目录下的图片
const images [{ id: img1, label: 图片1, src: /favicon.ico },{ id: img2, label: 图片2, src: /image2.png },{ id: img3, label: 图片3, src: /image3.png },{ id: img4, label: 图片4, src: /image4.png },{ id: img5, label: 图片5, src: /deepSeaField.png },{ id: img6, label: 图片6, src: /image2.png },{ id: img7, label: 图片7, src: /image3.png },{ id: img8, label: 图片8, src: /image4.png }
]
/scriptstyle scoped
/* 整体容器 */
.container {max-width: 1000px;margin: 0 auto;text-align: center;
}/* 按钮组一行排列 */
.button-group {display: flex;justify-content: space-around;gap: 10px;margin-bottom: 20px;flex-wrap: wrap; /* 保证小屏设备时自动换行 */
}/* 按钮样式 */
.image-button {display: flex;flex-direction: column;align-items: center;justify-content: center;background: white;border: 2px solid #ddd;border-radius: 12px;padding: 10px;cursor: pointer;transition: all 0.3s ease-in-out;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);width: 100px; /* 固定宽度 */height: 120px; /* 固定高度 */
}.image-button:hover {background: #f0f0f0;transform: scale(1.05);
}/* 按钮里的小缩略图 */
.button-thumbnail {width: 50px;height: 50px;border-radius: 8px;object-fit: cover;margin-bottom: 5px;
}/* 主要图片 */
.image-container {margin-top: 20px;display: flex;justify-content: center;align-items: center;height: 600px; /* 固定高度居中展示大图 */border: 2px solid #ddd;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}.main-image {max-width: 100%;max-height: 100%; /* 确保图片不会超出容器 */object-fit: contain; /* 保持图片比例 */
}
/style截图如下 3. 终极Demo
后续发现会很卡顿
优化点 去除黑色边框 由于 button 在不同浏览器默认会有 outline 选中效果添加 outline: none 解决 通过 border: none 避免额外边框影响 流畅过渡动画 按钮缩略图 采用 background-image提高图片加载速度 主图片切换 采用 Vue Transition 并优化 opacity 过渡使切换更顺畅 减少卡顿 预加载所有图片防止首次切换时加载延迟 优化 changeImage 逻辑避免重复更新 currentImage
templatediv classcontainer!-- 按钮组 --div classbutton-groupbuttonv-forimage in images:keyimage.idclickchangeImage(image.src)classimage-button:class{ active: currentImage image.src }div classbutton-thumbnail :style{ backgroundImage: url(${image.src}) }/divspan{{ image.label }}/span/button/div!-- 动态展示图片 --div classimage-containertransition namefade modeout-inimg v-ifcurrentImage :srccurrentImage altDynamic Image classmain-image //transition/div/div
/templatescript setup
import { ref, onMounted } from vue// 定义按钮与对应的图片路径
const images [{ id: img1, label: 未来制造, src: /futureManufacturing.png },{ id: img2, label: 未来材料, src: /futureMaterials.png },{ id: img3, label: 未来信息, src: /futureInformation.png },{ id: img4, label: 未来能源, src: /futureEnergy.png },{ id: img5, label: 未来医疗, src: /futureMedical.png },{ id: img6, label: 人工智能, src: /artificialIntelligence.png },{ id: img7, label: 数字经济, src: /digitalEconomy.png },{ id: img8, label: 低空经济, src: /lowAltitudeEconomy.png },{ id: img9, label: 深海领域, src: /deepSeaField.png }
]// 默认选中第一张图片
const currentImage ref(images[0].src)// 切换图片
const changeImage (src) {if (currentImage.value ! src) {currentImage.value src}
}// 预加载图片减少切换时的卡顿
const preloadImages () {images.forEach(image {const img new Image()img.src image.src})
}onMounted(preloadImages)
/scriptstyle scoped
/* 整体容器 */
.container {max-width: 1200px;margin: 0 auto;text-align: center;
}/* 按钮组 */
.button-group {display: flex;justify-content: center;gap: 10px;flex-wrap: nowrap;overflow-x: auto;padding: 10px 0;scrollbar-width: none; /* 隐藏滚动条 */
}/* 按钮样式 */
.image-button {display: flex;flex-direction: column;align-items: center;justify-content: center;background: white;border: none;border-radius: 10px;padding: 5px;cursor: pointer;transition: transform 0.2s ease, background 0.2s ease;width: 90px;height: 110px;outline: none; /* 去除点击时的黑框 */
}.image-button:hover {transform: scale(1.05);
}/* 选中状态 */
.image-button.active {background: #e3f2fd;box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}/* 按钮里的小缩略图 */
.button-thumbnail {width: 50px;height: 50px;border-radius: 8px;background-size: cover;background-position: center;margin-bottom: 5px;
}/* 主要图片 */
.image-container {will-change: transform, opacity;margin-top: 10px;display: flex;justify-content: center;align-items: center;height: 600px;border-radius: 10px;width: 100%; /* 增加宽度 */max-width: 1200px; /* 限制最大宽度防止过大 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);overflow: hidden;
}.main-image {max-width: 100%;max-height: 100%;object-fit: contain;
}/* 过渡动画 */
.fade-enter-active, .fade-leave-active {transition: opacity 0.3s ease-in-out;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
/style
