Specific method of using Swiper in React


The nearest React project needs to use a roll map, naturally, I think of Swiper, I have always used the NPM installation, but I have found it online. Many, information is rare, so it is temporarily loaded by the JS and CSS files directly in Index.html and the CSS files below, and the specific steps and methods are used below.


First, let me use the Swiper3x series here. Next, the specific step:

Index.html introduces JS and CSS file


      React app          
Of course, I can download the JS and CSS files locally, you can also use the CDN path, to this, the introduction is basically the introduction, How to call here, the introduced JS file cannot be used directly in the component, and a variable is required at the beginning, the subsequent use method and Ordinary HTML Writings is consistent, the difference is where the life cycle should be written, and the individual is recommended to write in the ComponentDidUpdate cycle, because sometimes the data is asynchronously obtained, just when it is completed, not necessarily completed, the data acquisition is completed Update State, which triggerates the UPDATE cycle.
Import React, {Component} from ‘React’LetSwiper = window.swiperclass about extends component {constructor (props) {super (props); this.State = {MyName: “here is About page”,}} ComponentWillunmount ()} ComponentWillunmount ()} ComponentWillunmount ()} ComponentWillunmount ()} ComponentWillunmount () {if (this.swiper) {// Destroy Swiper THIS.SWIPER.DESTROY ()} ComponentDidUpdate () {if (this.swiper) {this.swiper.slideto (0, 0) this.swiper.destroy () this.swiper = null;} this.swiper = new Swiper (this.Refs.lun, {loop: true, PAGINATION: {El: ‘.swiper-paging’, clickable: true,},});} render () {return (


Slide 2


Slide 3

Slide 4
 SLIDE 5  
SLIDE 6
Slide 7
SLIDE 9
Slide 10
)} EXPORT Default About
This completes a rotation implementation, this I wrote Demo just written data. In the assembly, the general situation should be obtained by asynchronous.
In fact, there is still a problem here, it is to add a click event to Swiper-Slide. Generally, it is directly to add an OnClick event to Swiper-Slide, but the problem is here. If this round broadcast can be circulated, Swiper automatically generates two nodes, one is the first node, one is the last node, placed in the last and the beginning, facilitating the loop linkage. However, when he copied the node, it could not copy its OnClick click event, which caused the first and right sliding to the left to the left after Swiper initialization to the last one of these two nodes did not click on the event. So we should use Swiper's callback function. Let's transform the way to build Swiper.
this.swiper = new swiper (this.refs.lun, {loop: true, PAGINATION: {El: '.swiper-paging', Clickable: True, OnClick: Function (Swiper, E) {var pagingContainer = document.getElementByid ('pgfather'); var pagingfather = document.getlementByid ('body-left-pagination "; // This is the judgment pointBroadcast point dots, because the method will also trigger when clicking on the dot, so in order to ensure that the dot ranking effect should be shielded down (! This.isdomcontains (PaginationFather, E.TARGET, PAGINATIONCONTAINER )) {var se = document.queryselectoralL (". body-left-lunbo.swiper-slide"); var NOWNODE = ""; var index = swiper.activeIndex; if (index == 0) {index = se.length -3;} else if (index == se.length-1) {index = 0;} else {index = swiper.activeIndex-1;} if (Self.State.SwiperList.Length === 1) {nowNode = SE [0];} else {for (VAR i = 0; i
The click event of Swiper can be implemented. I added it on the code. One condition is that when only one of the Swiper Roundcomb nodes, it will be invalid. If this situation is judged, if only one node is directly assigned to NOWNODE, it can be assigned to nowNode.
There is a point to determine whether it is clicked is to determine the point of the bottom circle. I put it out for the reference


isDomcontains: function (Parentele,ELE, ContalexLog (PARENTELE) / / Determines if a node is its child node // Parentele: To determine the parent node of the node // ELE: The child to judge // container: the parent of the two Node // If the value of Parentele H and ELE pass, then the same IF (PARENTELE == ELE) {Return True} if (! ELE ||! Ele.NodeType || Ele.NodeType! = 1) {Return False;} // If the browser supports Contains if (Parentele.Contains) {Return Parentele.Contains (ELE)} // Firefox supports {Return !! (PARENTELE.COMPAREDocumentPosition (ELE) & 16);} // Get the ELE’s parent’s VAR PARELE = Ele.ParentNode; While (PARELE && PARELE! = Container) {if (PARELE == Parentele) {Return True;} PARELE = PARELE.PARENTNODE;} Return False;}


The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment