How to realize the Seamless Carousel function of Home Page on Mobile phone by react

The main content of this article is to explain "how to achieve the home page seamless rotation function of react". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "react how to achieve the mobile phone home page seamless rotation function" bar!

Touchstart = this.touchStart.bind (this); touchmove = this.touchMove.bind (this); touchend = this.touchEnd.bind (this); / / set transform cssTransform (ele, attr, val) {if (! ele.transform) {ele.transform = {};}; / / set the property when a value is passed in. If (arguments.length > 2) {ele.transform [attr] = val; var sval ='; for (var s in ele.transform) {if (s = 'translateX') {sval + = s +' ('+ ele.transform [s] +'px)' } / / if you really don't understand, console.log (sval) can see that when you get to the last one, there will be a process of skipping to the second and then quickly to the third ele.style.WebkitTransform = ele.style.transform = sval;}} else {val = ele.transform [attr] If (typeof val = = 'undefined') {if (attr =' translateX') {val = 0;}}; return val;}} / / automatic carousel auto () {clearInterval (this.timer) This.timer = setInterval (() = > {/ / when the last one is reached, if (this.now = this.props.len-1) {this.now = this.props.len / 2-1 / / these two sentences of code are very important and are the key to the implementation. None is to jump this.LunBoEle.style.transition = 'none'; this.cssTransform (this.LunBoEle,' translateX',-this.now * this.sliderWidth) without translation. } / / timing is because the csstransform function executed in the tab function has an order with the csstransform when it reaches the last one above, otherwise it will still cause the shift to the right. SetTimeout (() = > {this.now++; this.tab ();}, 30);}, this.props.delay * 1000);} tab () {this.LunBoEle.style.transition = '.5s'; this.cssTransform (this.LunBoEle, 'translateX',-this.now * this.sliderWidth) Let SelectIndex = this.now% (this.props.len / 2); $('.slider-dots-wrap span') .eq (SelectIndex) .addClass (' slider-dot-selected'). Siblings (). RemoveClass ('slider-dot-selected');} componentDidMount () {this.LunBoEle = document.querySelector (' ul.lunbo'); this.SliderEle = document.querySelector ('.slider') This.sliderWidth = $('.slider'). Width (); this.cssTransform (this.LunBoEle, 'translateX', 0); this.auto.bind (this) (); this.SliderEle.addEventListener (' touchstart', this.touchstart, false); this.SliderEle.addEventListener ('touchmove', this.touchmove, false); this.SliderEle.addEventListener (' touchend', this.touchend, false) } / / trigger touchStart (e: TouchEvent) {e.stopPropagation (); if (! this.stopped) {clearInterval (this.timer); this.LunBoEle.style.transition = 'none'; let moveX = this.cssTransform.bind (this) (this.LunBoEle,' translateX'); this.now = Math.round (- moveX / this.sliderWidth) If (this.now = 0) {this.now = this.props.len / 2;} else if (this.now = this.props.len-1) {this.now = this.props.len / 2-1;} this.cssTransform (this.LunBoEle, 'translateX',-this.now * this.sliderWidth) This.startPoint = e.changedTouches [0] .pageX; this.startEle = this.cssTransform.bind (this) (this.LunBoEle, 'translateX');}}; / / Mobile touchMove (e: TouchEvent) {e.preventDefault (); e.stopPropagation (); if (! this.stopped) {let endPoint = e.changedTouches [0] .pageX Let disX = endPoint-this.startPoint; this.cssTransform.bind (this) (this.LunBoEle, 'translateX', disX + this.startEle);}} / / Pan end touchEnd (e: TouchEvent) {e.stopPropagation (); if (! this.stopped) {let moveX = this.cssTransform.bind (this) (this.LunBoEle,' translateX') / / here I have made a judgment on mobile if (Math.abs (moveX) > Math.abs (this.now * this.sliderWidth)) {this.now = Math.ceil (- moveX / this.sliderWidth);} else {this.now = Math.floor (- moveX / this.sliderWidth);} this.tab.bind (this) () This.auto.bind (this) ();}} componentWillUnmount () {/ / it is important to note that the clarity here is very important, because if the user changes in the background and the user refreshes, it will cause problems with the following dot clearInterval (this.timer); / / all events need to be cleared of this.SliderEle.removeEventListener ('touchstart', this.touchstart, false) when uninstalling. This.SliderEle.removeEventListener ('touchmove', this.touchmove, false); this.SliderEle.removeEventListener (' touchend', this.touchend, false);} / / prevent carousel componentDidUpdate () {if ((this.props.len / 2) = 1) {clearInterval (this.timer); this.stopped = true if there is only one carousel } else {this.stopped = false;}} render () {let itemNodes = this.props.items.map ((item, idx) = > {return;}); let dotNodes = []; let count = this.props.len / 2; for (let I = 0; I < count Add selected dotNodes [I] = () to the first dot point. } return ({itemNodes} {dotNodes}) at this point, I believe you have a deeper understanding of "how to achieve seamless home page rotation on the mobile phone by react". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!