1. How to use
Official website address
Refer to this article (click me)
2. Common situations
When the image needs to be retrieved dynamically
After the data is loaded successfully and rendered, node initialization is performed. example:
(‘Interface address', parameter).then(response => {
= ; //pages Array of rendering data this.$nextTick(() => { //Resource ends // The properties in mySwiper are configured as needed. For details, please refer to the official website. let mySwiper = new Swiper(".swiper-container", {
initialSlide :0,//Default playback (value is picture subscript) loop: false,//No loop speed: 600, //Switch speed paginationClickable: true, //Click the small dot to switch });
});
});
When there are 3 groups of pictures that need to be played in sequence (multiple groups and so on)
Scenario: When the second group of pictures slides into the last picture, the third group of pictures needs to be loaded; when the second group of pictures slides into the first picture, the first group of pictures needs to be loaded.
Method: During initialization, configure the callback functions onTouchStart (the X-axis value that starts sliding) and onTouchEnd (the X-axis value that ends sliding). Use the difference to determine whether to slide forward or stroke backward.
this.$nextTick(() => {
let mySwiper = new Swiper(".swiper-container", {
observer: true, // When modifying swiper itself or child elements, automatically initialize swiper observeParents: true, // When modifying the parent element of swiper, swiper will be automatically initialized onTouchStart: function(swiper) {
= ();
},
onTouchEnd: function(swiper) {
= ();
if ( > && - 1 == ) {
//Slide backwards and load the next set of pictures } else if ( == 0 && < ) {
//Swipe forward and load the previous group of pictures }
}
});
});
At this time, the picture has loaded another group of pictures, but the pictures are not connected together. This requires the slideTo method to jump (if the third group is loaded, it will jump to the 0th subscript; if the first group is loaded, it will jump to the number of pictures in the subscript -1).
('The picture to be redirected', 10, false) // 10Indicates jump speed；false Represents whether the function is triggered
Data method configuration
export default {
name: '',
data() {
return {
swiperOption: {
// NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)
// notNextTick is a component's own attribute. If notNextTick is set to true, the component will not instantiate swiper through NextTick, which means you can get the swiper object as soon as possible. If you need to use the swiper object to do something just loaded, then this attribute must be true notNextTick: true,
// Swiper configs All configurations are the same as Swiper official API configuration autoplay: 3000,
// direction : 'vertical',
effect:"coverflow",
grabCursor : true,
setWrapperSize :true,
// autoHeight: true,
// paginationType:"bullets",
pagination : '.swiper-pagination',
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
// scrollbar:'.swiper-scrollbar',
mousewheelControl : true,
observeParents:true,
// if you need use plugins in the swiper, you can config in here like this
// If you design the plug-in yourself, some configuration-related parameters of the plug-in should also appear in this object, as follows debugger // debugger: true,
// swiper callbacks
// Various callback functions of swiper can also appear in this object, just like swiper official // onTransitionStart(swiper){
// (swiper)
// },
// more Swiper configs and callbacks...
// ...
}
}
},components: {
swiper,
swiperSlide
},
// you can find current swiper instance object like this, while the notNextTick property value must be true
// If you need to get the current swiper object to do something, you can define a method property like below to get the current swiper object, and notNextTick must be true computed: {
swiper() {
return this.$
}
},
mounted() {
// you can use current swiper instance object to do something(swiper methods)
// Then you can use the swiper object in the current context to do what you want to do // ('this is current swiper instance object', )
// (3, 1000, false)
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.