Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use native js in vue.js to achieve mobile carousel map". In daily operation, it is believed that many people have doubts about how to use native js to achieve mobile carousel map in vue.js. The editor has consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful for you to answer the doubt of "how to use native js to realize mobile carousel graph in vue.js". Next, please follow the editor to study!

First, understand the events of the native js mobile.

There are four kinds of events on native js mobile:

Event action touchstart fingers on the screen trigger touchmove fingers move on the screen trigger (high frequency trigger) touchend fingers leave the screen trigger touchcancel system cancel touch event

After each event is triggered, an event parameter is returned, and the event contains three touch lists, namely:

Touch list contents in event all finger lists on touches screen targetTouches current finger list in this DOM changedTouches refers to the finger list of the current event (use this as much as possible in this example)

Each touch object in the touch list (that is, each finger) corresponds to some information generated during the touch (only partially written)

Touch message meaning clientX / clientY touchpoint relative to browser pageX / pageY touchpoint relative to page screenX / screenY touchpoint relative to screen

Summary: we can use the parameter event.changedTouches [0] .pageX passed in by the touch event to get the current position of the finger (changedTouches [0]) relative to the page (pageX) that we triggered (event) the touch event.

Second, the actual combat of the broadcast map

We only use the first three triggering events in the rotation graph function. Let's take a look at the specific application.

Because the vue.js project is developed in the form of components, so I will show it here in the form of a component, if you have any questions, you can leave a message.

Part I: template template

The first part of the interpretation:

1. The div tag of class= "ContinuPlay_box" is used as the internal label of the root tag package in the component template (knowledge point: if multiple tags in the component are at the same level, they must be wrapped with a single tag). It is also used to set the overflow:hidden style to hide the unplayed broadcast image.

2. The div tag of class= "items_box", as the parent of the div tag of the internal class= "slide", is used to open the flex layout. The main content of this tag is the picture of the broadcast picture.

3. The div tag of class= "slide" uses the v-for instruction to traverse and output the data banners passed in by the parent component.

4. The div tag of class= "points", as the parent tag of the div tag of the internal class= "each_point", is used to open the flex layout so that the dots in the middle and lower part of the broadcast map are arranged in an orderly manner. The main content of the tag is the progress bar dot at the bottom of the middle of the broadcast map.

The second part: the script tag code export default {name: "ContinuPlay", props: ['banners'], / / accepts the banners data data () {return {bannerwidth: 0, / / the width of the carousel map: 0, / / the Abscissa EndPoint: 0 of the starting point of the touch. / / Abscissa MoveLength: 0 of the touch end point, / / the difference between StartPoint and EndPoint CurrentImg: 0, / / the index of the current carousel graph isPlaying: true, / / determine whether it is in automatic carousel playTimer: null / / rotation timer}} Methods: {TouchStart (event) {/ / stop clearInterval (this.playTimer) / / get the start point of the touch this.StartPoint = event.changedTouches [0] .pageX}, TouchMove (event) {/ / get the end point of the touch this.EndPoint = event.changedTouches [0] .pageX this.slidings ()} TouchEnd () {this.Jump () / / start rotation this.startPlay ()}, / / Jump () method is used to handle the release of the hand to automatically jump to the next page or the previous page Jump () {const currentimg = document.getElementsByClassName ('slide') / / slide more than 40% of the width of the broadcast map. Jump to the next one. Otherwise, if (this.MoveLength > 0 & & this.CurrentImg! = = this.banners.length-1) {if (this.MoveLength > this.bannerwidth * 0.4) {this.CurrentImg + + currentimg [0] .style.marginal left =-this.CurrentImg * this.bannerwidth + 'px'} else {currentimg [0] .style.marg inLeft =-this.CurrentImg * this.bannerwidth + 'px'}} else if (this.MoveLength

< 0 && this.CurrentImg !== 0){ if(-this.MoveLength >

This.bannerwidth * 0.4) {this.CurrentImg-- currentimg [0] .style.marginal left =-this.CurrentImg * this.bannerwidth + 'px'} else {currentimg [0] .style.marginal left =-this.CurrentImg * this.bannerwidth +' px'}, / / slidings () method is used to handle during sliding Slidings () {/ / determine whether to click or slide if (this.StartPoint = this.EndPoint) {return} this.MoveLength = this.StartPoint-this.EndPoint / / Operation DOM Get the object label const currentimg = document.getElementsByClassName ('slide') / / get the width of the broadcast graph this.bannerwidth = currentimg [0] .offsetWidth / / determine whether it is out of the sliding range, that is, the first page cannot slide to the previous page. The last page cannot slide if (this.MoveLength > 0 & & this.CurrentImg! = = this.banners.length-1) {currentimg [0] .style.marginal left =-this.MoveLength-this.CurrentImg * this.bannerwidth + 'px'} else if (this.MoveLength)

< 0 && this.CurrentImg !== 0){ currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth + 'px' } }, //开启轮播 startPlay() { clearInterval(this.playTimer) this.playTimer = setInterval(() =>

{if (this.CurrentImg = 3) {this.CurrentImg =-1} this.CurrentImg + + const currentimg = document.getElementsByClassName ('slide') this.bannerwidth = currentimg [0] .offsetWidth currentimg [0] .style.mar ginLeft =-this.CurrentImg * this.bannerwidth +' px' currentimg [0] .style.style = 'all 1s ease'} 3000)}}, mounted () {/ / page automatically starts this.startPlay ()} when the page is finished:

1. In the component data property, several variables are initialized: StartPoint (touch start Abscissa), EndPoint (touch end Abscissa), MoveLength (length of movement (plus or minus), CurrentImg (current carousel graph index)

two。 After the page is hung, the startPlay method in methods is triggered to enable the carousel function.

3. In the touch event, the value of StartPoint-EndPoint is mainly used to make the picture move synchronously with the sliding direction of the finger, and the automatic rotation timer is turned off at the beginning of the touch, and the rotation timer is automatically turned on after the touch is over.

4. After letting go, use the Jump () method to jump to the upper and next page of the picture.

The third part: css style part .ContinuPlay _ box {overflow: hidden; position: relative;} .ContinuPlay _ box .items _ box {display: flex;} .ContinuPlay _ box. Examples {flex-shrink: 0; width: 100%;} .ContinuPlay _ box .styles img, .ContinuPlay _ box .construca {width: 100%; height: 100%;} .points _ box {display: flex; justify-content center: } .points {display: flex; width: 33%; height: 10px; position: absolute; bottom: 8px; justify-content: space-evenly;} .points .each _ point {width: 8px; height: 8px; border-radius: 8px; background: # fff; opacity: 0.7;} .points .current {background: # ff0031;}

The css style will not be explained much, because it is abstract, you can debug and optimize it according to my code, and mine should not be the best.

Third, effect picture

This gif diagram shows some of the project effects that I have developed now, including the rotated graph function described in this article.

At this point, the study on "how to use native js in vue.js to achieve mobile rowing graph" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.