1 首页思路
直接上图,主页跟旧版的类似。开头的固定图片改成轮播图,手动搞了个循环轮播,效果还不错。主体内容仍然是左边导航,右侧推荐文章列表。底部是仓库,邮箱地址等。
2 轮播图
轮播图的布局不是很复杂,左右切换键跟中间文字都是绝对定位,所以实际上只有图片。重点是循环轮播的特征,即在最后一张继续点击切换下一张时会切换到第一张,并且保证切换动画方向不变,在很多轮播图插件中,要么在第一张和最后一张无法继续切换;要么是倒退的动画回到第一张或最后一张,我个人感觉这种不连续的动画不是很好,于是自己搞了个循环轮播。主要有以下思路。
- 将需要展示的图片放在一个数组。
- 在数组首尾追加尾末图片,即实际上加载n+2张图。
- 图片宽度设为100vw铺满屏幕,通过flex布局将图片放在同一行,通过translateX来切换图片。
- 当切换的首尾两张图时(新数组,额外添加尾首图片后),关闭DOM动画,直接切换到最后一张或第一张,此时用户不会看到该切换过程。
<div class="imgs">
<!-- 动态绑定transition和translateX -->
<img
class="bg-img"
v-for="(img, index) in imgs"
:key="index"
:style="
`
transition: ${transition};
transform: translateX(${imgPosition}vw)
`
"
:src="img"
/>
</div>
setup(props, ctx) {
const data = reactive({
imgs: [
"http://blogs.jinlontang.cn/background.jpg",
"http://load.jinlongang.cn/image/degree.png",
"http://blogs.jinlhitang.cn/avator.jpg",
"http://blogs.jinlochitang.cn/icon/mark_blue.png",
],
imgPosition: -100,
transition: "var(--speed-ease)",
})
// 增多首尾两张,方便循环
data.imgs.push(data.imgs[0])
data.imgs.unshift(data.imgs[data.imgs.length - 2])
const change = (i) => {
data.transition = "var(--speed-ease)"
let position = data.imgPosition + i * 100
// 向右超出
if (position < -(data.imgs.length - 2) * 100) {
setTimeout(() => {
data.transition = "0s"
data.imgPosition = -100
}, 500)
}
// 向左超出
else if (position === 0) {
setTimeout(() => {
data.transition = "0s"
data.imgPosition = -(data.imgs.length - 2) * 100
}, 500) // 切换动画时长500ms,500ms后再进行跳转
}
data.imgPosition = position
}
return { ...toRefs(data), change }
}
3 文章列表卡片
卡片样式也没有变化,因为我觉得设计得挺不错的,当鼠标移入卡片时阴影会加深,当鼠标移入标题时有下划线会从中间向两边展开的动画。点击标题进入对应的文章,点击下面的标签可以进入文章列表界面, 并根据指定标签进行搜索。
下划线通过添加一个div实现
<header>
<h3>
<router-link to="/Articles/all">{{article.title}}</router-link>
</h3>
<div class="line"></div>
</header>
header
display inline-block
h3
color var(--green-font)
.line
width 0
height 3px
margin-left 50%
transform translateX(-50%)
background-color var(--green-bg)
transition var(--speed-hover)
&:hover .line
width 100%