Implementation effect

  • Rotating stack

  • translation

When I did Hybrid App a while ago, UI design required that the display of a page should realize the effect of sliding wheel seeding, the selected content card should be displayed in the center, and the previous content card and the next content should be displayed at the back of the selected card with a size twice smaller and Gaussian blur, etc. Most coquetted is the slide effect if a rotation overlay. (it broke!

At that time, I used the page of VUE-CLI-3 + ant-design-Vue implementation, and found that the ready-made Carousel component was available in ant-Design-Vue. Due to the urgent schedule, I temporarily implemented the first version with this, without special effects and other flashy displays. After checking out the first version, I found that Ant-Design-Vue really had a lot of bugs. Carousel is also very awkward on mobile. It’s always a bad experience. In the end, I wrote all the styles myself, wrapped all the components myself, and moved Ant-Design-Vue completely out of the project.

Swiper is a good idea. There is a VUE version of Swiper, but there is no dedicated VUE version documentation and few projects can be found. In frustration, I nibbled on a Swiper4 document and found a bit of information. The realization of the requirements is also. A simple arrangement, wrote a simple small demo, record, if I can help you that is the best ~

1. Introduce vue-awes-swiper first

Vue-awesome-swiper can be imported globally or within a component. If you only need it in one place in your project, use it on that page. If you need it in more than one place, use it globally.

  • Global introduction:
// main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)
Copy the code
  • Component introduction:
// xxx.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}
</script>
Copy the code

2. Use it on the page

<template>
  <div class="swiper-content">
    <swiper ref="mySwiper" :options="swiperOption" class="show-swiper">
      <template v-for="(item, index) in list">
        <swiper-slide :key="index">
          <div class="swiper-item">
            <span>{{ item }}</span>
          </div>
        </swiper-slide>
      </template>
    </swiper>
  </div>
</template>
Copy the code

Js part

  • Rotating stack
<script> import { mapState } from 'vuex' import store from '@/store' export default { data() { return { list: [1, 2, 3, 4, 5, 6], swiperOption: {// Set the number of slides that the slider can display at the same time. Default is 1. 'auto' automatically sets the number of slides based on the width of slidesPerView: 'auto', /* * Turn on this parameter to calculate progress for each slide * For slide progress, the active one is 0 and the others are reduced by 1 */ watchSlidesProgress: CenteredSlides: true, // If you want to initialize a Swiper instance immediately after you create it, initialize it manually: False, longSwipesRatio: 0.1, touchReleaseOnEdges: true, observer: true, // Automatically initialize swiper observeParents when modifying swiper itself or child elements: {progress: function() {for (let I = 0; i < this.slides.length; I ++) {const slide = this.slides. Eq (I) const slideProgress = this.slides[I]. Progress // The progress value of the current element set Let modify = 0 // offset weight if (parseInt(math.abs (slideProgress)) > 0) {modify = math.abs (slideProgress) * 0.2 } const translate = slideProgress * modify * 500 + 'px' // 500 is the width of the swiper-slide const scale = 1 - Math.abs(slideProgress) / 5 // Scale the weight value, as progress decreases from middle to both sides, Const zIndex = 99 - math.abs (math.round (10 * slideProgress)) slide. Transform (' translateX(${translate}) scale(${scale})`) slide.css('zIndex', zIndex) slide.css('opacity', If (parseInt(math.abs (slideProgress)) > 1) {// Set only the selected element and its display twice, Other hidden slides.css ('opacity', 0)}}}, slideChange: function() { store.commit('SET_ACTIVE_INDEX', this.activeIndex) } } } } }, computed: { swiper() { return this.$refs.mySwiper.swiper }, ... mapState({ activeItemIndex: state => state.activeIndex }) }, mounted() { this.initSwiper() }, methods: {initSwiper() {this.$nextTick(async() => {await this.swiper.init() this.swiper.slideTo(this.activeItemIndex) }) } } } </script>Copy the code
  • translation
<script> import { mapState } from 'vuex' import store from '@/store' export default { data() { return { list: [1, 2, 3, 4, 5, 6], swiperOption: { slidesPerView: 'auto', watchSlidesProgress: True, // Set slidesOffsetBefore: 37, // Set the slide distance (px) spaceBetween: 17, centeredSlides: True, init: false, longSwipesRatio: 0.1, touchReleaseOnEdges: true, Observer: Swiper observeParents: true, // Swiper observeParents: true, swiper observeParents: true, swiper observeParents: true, swiper observeParents: {progress: function() { for (let i = 0; i < this.slides.length; i++) { const slide = this.slides.eq(i) const slideProgress = this.slides[i].progress const scale = 1 - Math.abs(slideProgress) / 5 // Scale the weight value, as progress decreases from middle to both sides, Slide.transform (' scale3D (${scale}, ${scale}, 1) ')}}, slideChange: function() { store.commit('SET_ACTIVE_INDEX', this.activeIndex) } } } } }, computed: { swiper() { return this.$refs.mySwiper.swiper }, ... mapState({ activeItemIndex: state => state.activeIndex }) }, mounted() { this.initSwiper() }, methods: {initSwiper() {this.$nextTick(async() => {await this.swiper.init() this.swiper.slideTo(this.activeItemIndex) }) } } } </script>Copy the code

In the configuration parameter init I set false, I want to initialize the caroute component with this.swiper.init() after the project is mounted and the interface data is retrieved. Then I store the index of the active item in vuex, so that every time I return the page from another page, I can use this.swiper.slideto (this.activeItemIndex) to control which content card I want to locate.

3. Style initialization

.swiper-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 50px 0;

  .show-swiper {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .swiper-slide {
      width: 500px;
      // Indicates that all attributes have action effects. The transition time is 0.4 seconds, and the transition effect starts and ends slowly
      transition: all .4s cubic-bezier(.4.0.2.1);
      
      .swiper-item {
        width: 100%;
        height: 500px;
        background: rgb(140.172.134);
        border-radius: 6px;
        color: orangered;
        font-size: 24px;
        line-height: 1.5;
        border: 1pxsolid orangered; }}}}Copy the code

Because slidesPerView: ‘auto’, so swiper-slide we need to give it an initial width so it can automatically calculate the container width, and then I’m going to animate it: all .4s cubic-bezier(.4, 0, .2, 1); You can make changes to suit your needs

That’s about it, isn’t it easy? I will post the source code address, if necessary, clone it for reference ~, I used vuE-CLI3 in the project, you can adjust.

  • Based on vue-awesome-swiper + VUe-CLI3, the sliding wheel casting project has two effects of rotation superposition and translation