vue3重构个人网站2——首页

1 首页思路

2 轮播图

3 文章列表卡片

1 首页思路

  直接上图，主页跟旧版的类似。开头的固定图片改成轮播图，手动搞了个循环轮播，效果还不错。主体内容仍然是左边导航，右侧推荐文章列表。底部是仓库，邮箱地址等。

2 轮播图

  轮播图的布局不是很复杂，左右切换键跟中间文字都是绝对定位，所以实际上只有图片。重点是循环轮播的特征，即在最后一张继续点击切换下一张时会切换到第一张，并且保证切换动画方向不变，在很多轮播图插件中，要么在第一张和最后一张无法继续切换；要么是倒退的动画回到第一张或最后一张，我个人感觉这种不连续的动画不是很好，于是自己搞了个循环轮播。主要有以下思路。

1. 将需要展示的图片放在一个数组。
2. 在数组首尾追加尾末图片，即实际上加载n+2张图。
3. 图片宽度设为100vw铺满屏幕，通过flex布局将图片放在同一行，通过translateX来切换图片。
4. 当切换的首尾两张图时（新数组，额外添加尾首图片后），关闭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%