Shulou(Shulou.com)06/02 Report--

Vue2 uses the example analysis of swiper4 trample. For this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Preface

At first, I planned to use the latest swiper7, but then it seemed to be a vue2 compatibility problem, with all kinds of errors reported, so back from 7 to 6, and then back to 5 Magi 5 was the bug that encountered the mouse wheel incident, so I rolled back again, and finally the painting style was normal at 4.

The first is to introduce

Npm i swiper

The sentence "↑" is not copied, because there are too many mistakes, and repeated quotes lead to the point where you can type directly by hand.

It is worth mentioning that the download will download 7 by default. It is better to use the Aite symbol to calibrate it directly and download it again. At this time, you need to change the version to version 4 in package.json and download it again.

Stampede pit 1: in order to ensure stability, every time you change this version in package.json, it is best to download the current version immediately, and then restart webstorm.

Other software does not know if it is necessary.

Step on pit 2: lead in position

If you are anxious to read this blog and do not mind rolling back to 4, you can download version 4 and then introduce these three sentences where you need the rotated picture.

Import 'swiper/dist/js/swiper'import' swiper/dist/css/swiper.css'import Swiper from "swiper"

In this way, you can copy the code on the official website. New Swiper is written in mouted.

Step on pit 3: use the space. If it is a roasting map, you need to pay attention to naming it, or simply use id to get it.

My code:

This.swiper = new Swiper (".swiper-container-son1", {}) step on pit 4: version change makes it impossible to use

The simplest one, the forward and backward attribute.

Example of official website 3:

NextButton:'. Swiper-button-next',prevButton:'. Swiper-button-prev'

An example of version 7 of the official website:

Navigation: {nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev",}

Version 7 of the official website is used here to take effect.

Most of them come into effect on the official website 7, but a few of them need version 4 to take effect.

There is also an extremely deceptive attribute, the roller

Omit * your mother will super double when she buys vegetables and there will never be a C position in square dancing * and other dirty words.

The official api, swiper3 and swiper7 examples on the official website are all the same sentence.

MousewheelControl: true

But maybe it's a swiper4 special, maybe it's a variety of indescribable bug, and the real code available in swiper4 is

Mousewheel: true, step on pit 5: various bug caused by dynamic rendering.

If your rotation data source is request data, then you need to add a sentence.

Observer: true,// initializes swiper automatically when swiper itself or child elements are modified

Or simply do it better and write it directly in the list monitor.

Watch: {imgList () {setTimeout (() = > {/ eslint-disable-next-line no-unused-vars this.swiper = new Swiper (".swiper-container-son1", {speed: 1000, autoplay: {delay: 4000, stopOnLastSlide: false, disableOnInteraction: true })}, 0)}}

This ensures that the plug-in is not executed until the request is completed.

Attached: Vue introduces swiper error solution reference

The scss file may not be installed. The scss file for vue-awesome-swiper should be installed separately. It is not imported with the package. Cnpm install-save swiper swiper/swiper-bundle.css swiper/swiper.scss

This is the answer to the sample analysis question about vue2 using swiper4 to step on the pit. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.