Vue3+TypeScript學習之旅---聯想桌布庫

部落格原文地址www.yunmobai.cn/blog/14

專案演示

網站演示：bizhi.yunmobai.cn/

網站原始碼：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 協議》，轉載必須註明作者和本文連結