Datav custom component React-swiper

Program source code

1. System environment

Windows 64 – bit

2. Use React in Datav

React development is supported by Babel, less and other plug-ins built into the Datav development tool.

1.1 First create a root node in the index.js page to mount components. To ensure the uniqueness of the root node, obtain the unique ID from the external configuration file.

1.2 Mount the component to the root node via reactdom.render. After these two steps, react development is normal.

3. Using Swiper (v6.8.4)

1. The single-line rote chart has the same behavior as the rote chart’s original, without additional modification.

2. Multi-line rotation diagram requires whole-screen switching, which is essentially to put all contents displayed on a screen in a slider. Group the source data according to the number of displayed lines and the number of displayed lines. Display the missing contents in separate screens and complete them.

4. Configure component parameters

The following figure shows the basicConfig configuration

The contentConfig configuration is shown below

5. Problems encountered and solutions

5.1 Swiper Version Is Incompatible

1. React versions are available in versions 6.x and 7.x of Swiper. I started with the latest 7.x release, but found that datav does not support the ESM specification, and 7.x is currently only available in esM. So if you can’t retrofit datav, you have to downgrade to version 6.x. (See Github Issues)
2. 3 files in swiper/ CJS /react/ directory (get-params.js/init-swiper.js/loop.js) reference to core file (swiper/ CJS /react/) But it was lost after the Datav was packed.

var _core = _interopRequireDefault(require(".. /.. /core"));Copy the code

3. Swiper/CJS /react/ to change the reference path. The problem is that the changes are overwritten when everyone reinstalls the NPM package, so you can’t just manually overwrite them every time. At this point, patch-package (usage documentation) appears, which automatically modifies the NPM package every time it is installed by patching the NPM. It is perfect. Datav does not support patch-package. f**k datav
4. Finally, copy six files from swiper/ CJS /react/ to the project and modify the corresponding files.

var _core = 
_interopRequireDefault(require("swiper/cjs/components/core/core-class"));
Copy the code

5.2 The React version must be later than 16.8.0

React Hook was introduced in the React version of Swiper. React Hook was not available until 16.8.0.

5.3 Compatibility problems with less features

Packaged publishing works fine, but components cannot be used on a larger screen. A similar situation (similar problem solution) was solved by refreshing the cache, but failed after the attempt. It was found that the @import was used in the less file, which led to the construction failure. So the summary is as follows:

1. The @import syntax is not supported
2. Syntax such as each is not supported and is best [email protected](less version) previous features.

5.4 Autoplay still cannot be automatically rotated after being configured

The Official documentation explains that the React version contains only core modules, and other modules need to be introduced manually.

By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first. Here is the list of additional modules imports:

Use the swiper. use method to import the required modules. Note that you also need to import style files when switching animation modules with Effect**, etc.

5.5 Rotation is no longer automatic after manually switching the rotation chart

Add disableOnInteraction: false to the AutoPlay configuration

autoplay: {
    //...
    disableOnInteraction: false,
}
Copy the code

5.6 Fade Switching animation appears page overlap

This can be resolved by configuring crossFade: true.

fadeEffect: { 
    crossFade: true
}
Copy the code

5.7 Only one Component can be displayed when multiple components appear on the same page

A root node is created before the component is mounted to the root node. If the id is the same, only the last component created will take effect.

5.8 Text is displayed as… omit

Customize n-line display through CSS, but it should be noted that the -webkit-line-clamp property has compatibility problems.