Learning journey of vue3 + typescript: Lenovo wallpaper library

Blog original addresswww.yunmobai.cn/blog/14

Project demonstration

Website Demo:bizhi.yunmobai.cn/

Website source code:gitee.com/baymaxsjj/by-vue-wallpap…

Website back end: the back-end interface of this project comes from Lenovo computer manager, software store and wallpaper. Recommended downloadLenovo computer manager, this project is only for personal learning.
Complete functions: Home rotation, classification, my wallpaper, wallpaper display, scroll loading, full screen display, add my favorite.
Completion progress: 95%. Basic realization and official basic functions.
Comparative display: the first line of the project, the second line from the official
This project is used to learn the knowledge of vue3 and typescript

Project introduction

Vue:3.0.0-0，Swiper: 6.3.1，TypeScript”: 3.9.3，VueX、VueRouter:4.0.0-0。
This project is to learn about vue3 and typescript, using vuex to manage data, and partly using typescript. The main reason is that I’m not familiar with this yet, and it’s very difficult to get in touch with it. To define the data type or report an error, I only use its syntax in vuex

Swiper

Swiper is a very good plug-in for scrolling graphs, which have their own styles. This is also the first time that I have come into contact with Vue. Vue is now available in 3.0, and swiper6 also provides Vue components. Therefore, this project uses the swiper component method to write the home page carousel diagram. Refer toswiper/vue
Swiper / Vue provides two components, swipershiperslide
Basic use

 <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>

Parameter introduction:
Refer toSwiper

// 
:watchSlidesProgress="true"
//Set the number of slides that the slider container can display at the same time
slidesPerView="auto"
//Center display
:centeredSlides="true"
//Cycle display
:loop="true"
//To use slidesperview: 'auto' in loop mode, you also need to use this parameter to set the number of loops to be used (generally, the number of loops is greater than the number of visible slides by 2).
:loopedSlides="5"
//Auto play
:autoplay="true"
//Forward and backward button
navigation
//Pager navigation
:pagination="{ clickable: true }"
//Callback function, which is executed when swiper's progress is changed, sets the switching animation
@progress="progress"
//Callback function, executed whenever swiper starts transition animation
@setTransition="setTransition"

event:

progress(swiper,progress){
    //Traverse all slides carousel
         for (let i = 0; i < swiper.slides.length; i++) {
         //Get to carousel
        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);
            }
        }

Rolling load

//The actual height of the document (including the height of invisible content)
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        //The height of the visible content of the document
        let clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight)
        //The distance from the top of the document's content, which is hidden when scrolling vertically, to the visible content in its viewport (the top of what is actually visible)
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

        //Determine whether the vertical scroll bar scrolls to the bottom: scrollheight - scrolltop = = = clientheight
        if(this.list.count>(parseInt(this.list.skip)+parseInt(this.list.limit))){
            if (scrollHeight - scrollTop <= clientHeight+150&&this.loading) {
              //// get data
              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

In fact, this bug is very strange, that is, there is no problem with the development. After compiling, some functions of the rotation chart are lost. The main problem is that the forward and backward disappear. What’s wrong? Even the style is different. I’m convinced. I hope there’s a big God to point out

This work adoptsCC agreementThe author and the link to this article must be indicated in the reprint