Vue3+TypeScript学习之旅---联想壁纸库

博客原文地址https://gitee.com/baymaxsjj

项目演示

网站演示：https://gitee.com/baymaxsjj

网站源码：https://gitee.com/baymaxsjj/by-vue-wallpaper

网站后端：本项目后端接口来自于联想电脑管家->软件商店->壁纸。推荐下载联想电脑管家，本项目只用于个人学习。
完成功能：首页轮播，分类，我的壁纸，壁纸展示，滚动加载，全屏展示，加入我的喜欢。
完成进度：95%。基本实现与官方基本功能。
对比展示：第一行本项目，第二行来自官方
本项目是用来学习Vue3和TypeScript知识所编写的项目

项目介绍

Vue:3.0.0-0，Swiper: 6.3.1，TypeScript": 3.9.3，VueX、VueRouter:4.0.0-0。
本项目的是学习Vue3,和TypeScript,使用Vuex对数据进行管理，部分使用了TypeScript,主要是我对这还不太熟，刚接触感觉挺费事，要定义数据类型，不然就报错，所以我只在VueX使用了其语法

Swiper

Swiper是一个非常好的滚动图插件，其中有各自样式的滚动图。这也是我第一次接触到，Vue现在已经出了3.0，而Swiper6也提供了Vue 的组件，所以本项目采用的是Swiper组件方式写的首页轮播图。详情参考swiper/vue
swiper/vue提供2 个组件SwiperSwiperSlide
基本使用

 <swiperv-if="list.length>0":watchSlidesProgress="true"slidesPerView="auto":centeredSlides="true":loop="true":loopedSlides="5":autoplay="true"navigation:pagination="{ clickable: true }"@progress="progress"@setTransition="setTransition"class="iconfont"><swiper-slide v-for="item of list" :key="item.id"><router-link :to="'/class/'+item.targetContent"><img :src="item.imgUrl" width="644"/></router-link></swiper-slide></swiper>

参数介绍：
详情参考swiper中文网

// 
:watchSlidesProgress="true"
//设置slider容器能够同时显示的slides数量
slidesPerView="auto"
//居中显示
:centeredSlides="true"
//循环显示
:loop="true"
//在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
:loopedSlides="5"
//自动播放
:autoplay="true"
//前进后退按钮
navigation
//分页器导航
:pagination="{ clickable: true }"
//回调函数，当Swiper的progress被改变时执行，对切换动画设置
@progress="progress"
//回调函数，每当设置Swiper开始过渡动画时执行
@setTransition="setTransition"

事件：

progress(swiper,progress){//遍历所有slides轮播图for (let i = 0; i < swiper.slides.length; i++) {//获取到轮播var slide = swiper.slides.eq(i);var slideProgress = swiper.slides[i].progress;let modify = 1;if (Math.abs(slideProgress) > 1) {modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;}let translate = slideProgress * modify * 260 + 'px';let scale = 1 - Math.abs(slideProgress) / 5;let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));slide.transform('translateX(' + translate + ') scale(' + scale + ')');slide.css('zIndex', zIndex);slide.css('opacity', 1);if (Math.abs(slideProgress) > 2) {slide.css('opacity', 0);}}},setTransition(swiper,transition) {for (var i = 0; i < swiper.slides.length; i++) {var slide = swiper.slides.eq(i)slide.transition(transition);}}

滚动加载

  //  文档实际高度（包括不可见内容的高度）let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight//  文档可见内容的高度let clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight)//  文档内容顶部（垂直滚动时顶部的内容会被隐藏）到它的视口可见内容（实际可以看见的内容顶部）的距离let scrollTop = document.documentElement.scrollTop || document.body.scrollTop// 判断垂直滚动条是否滚动到最底部： scrollHeight - scrollTop === clientHeightif(this.list.count>(parseInt(this.list.skip)+parseInt(this.list.limit))){if (scrollHeight - scrollTop <= clientHeight+150&&this.loading) {// // 获取数据this.loading=false// console.log(this.list.skip)let url=this.url.replace('skip=0','skip='+(parseInt(this.list.skip)+parseInt(this.list.limit)))axios.get(`/apis/${url}`).then(res=>{this.loading=truethis.$store.commit('addColumns',res.data.data)// store.commit('setLove',index)}).catch(e=>{})}}