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

项目演示

网站源码：gitee.com/baymaxsjj/by-vue-wallpap...

网站后端：本项目后端接口来自于联想电脑管家->软件商店->壁纸。推荐下载联想电脑管家，本项目只用于个人学习。
完成功能：首页轮播，分类，我的壁纸，壁纸展示，滚动加载，全屏展示，加入我的喜欢。
完成进度：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
基本使用

 <swiper
    v-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 === clientHeight
        if(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=true
                this.$store.commit('addColumns',res.data.data)
                // store.commit('setLove',index)
              }).catch(e=>{

              })
            }
        }

Bug

其实这个Bug很怪，就是开发是没问题，然后编译之后，轮播图部分功能丢失，主要是前进后退消失，什么毛病，连样式都不一样，我服了，希望有大神指点指点

本作品采用《CC 协议》，转载必须注明作者和本文链接