preface

The data visualization project has two main pages that need to be switched up and down quickly and easily

The installation

npm i -S vue-slidepage
Copy the code

The introduction of

import { SlideContainer, SlidePage } from 'vue-slidepage'
Copy the code

use

  • template 
    <slide-container ref="slideContainer">
  <slide-page >
      <component ></component >
  </slide-page>
  <slide-page>
      <component ></component >
  </slide-page>
</slide-container>
Copy the code
  • components 
    components: {	
    SlideContainer,
    SlidePage
},
Copy the code
  • methods 
    this.$refs.slideContainer.slideTo(page);
Copy the code

Options

<slide-container :useWheel="false"> </slide-container>Copy the code


name type default description
useAnimation Boolean True Whether to enable animation
refresh Boolean True Scroll each time to see if the animation is re-executed
useWheel Boolean True Whether to enable mouse wheel sliding
useSwipe Boolean True Whether to enable touch sliding on the mobile terminal
### Events
name value description
: — — — — — : : — — — — — : : — — — — — :
slideNext There is no Slide to the next screen
slidePrev There is no Slide to the previous screen
slideTo page Pass in the page page number and slide to the corresponding page
slideFile page Trigger the lazy manual animation for the corresponding page
destroy There is no Destroy the current instance, remove all events and restore the class property value.
update There is no Dynamic updates need to be performed when the page in the HTML changes.
# # # the last
For more details, refer to the source codevue-slidepage