Front end self study notes – Chapter 3 (complete link idea / createjs / Vue + JS smooth scrolling)

Time:2020-3-5

Long term update front-end self study notes, welcome to pay attention

  • Front end self study notes – the first (nginx / fluent / background system / vuepress blog)
  • Front end self study notes – Chapter 2 (automatic deployment of vuepress & self study of background projects)

1、 The idea of complete link

Author article link

My first three years at Taobao – the second year

PS: there are three articles about the first to the third year. I watched it for more than half an hour, and it was profitable. I suggest you take a moment to have a good look

Maximum gain – complete link idea

Whether it’s career development, career choice, or the small things in life, we can add a criterion to judge whether it’s worth it:Complete link

For example: this project makes money, then iterates, makes more money, and iterates... Cycle on. This is a good link, a complete closed loop.

The bad link is that product prototypes don't work. It's obvious that the project doesn't make money when the project is developed. After iteration, it still doesn't make money. It's going to end slowly, and it's still a chicken feather.

One more standard for predicting the future

You may think, what’s this? It’s chicken soup.

Actually, it’s not. It’s more importantBefore things happen, in preparation。 When we make a decision, we need to integrate the information of all parties and judge the future trend.

With the idea of complete connection, we can leap forward in the future. If the link is connected, explain the scheme (or idea.) The feasibility is relatively high. If the initial link is not expected to work, then whether to do it or not is a big question mark.

Full link – chestnuts for personal applications

I’ve been using it on myself lately

  1. Early to bed and early to rise is a good habit. I used to sleep at 12 and get up at 8. Now it’s 11 o’clock. It’s 7 o’clock. In the morning, there are about 2 hours to study or do other things. This habit of early to bed and early to rise is more sustainable than before.
  2. For example, for various front-end technologies, learn which one first and which one later. With the idea of a complete link, it’s simple. Of course, it is the most important technology at present, and it is more favorable for later development. (this is the dynamic createjs technology mentioned below). It’s like a headless fly.
  3. Take another Chestnut: Cooking by yourself is also a good link. If the food is delicious, I don’t like eating out. After that, the craft becomes better, and the pattern of eating is more and more, which is very sustainable.
    (PS: after cooking for several weeks, I really think the food outside is getting worse.)

2、 Canvas dynamic framework createjs

Use tutorial links

Getting started with createjs — Comment details to my style

Official website API

Experience

The company has partial dynamic effect development, and the dynamic effect of popular products uses createjs technology. I will soon develop similar products and learn relevant technologies as a reserve.

After two or three mornings of study, createjs is easier to learn than canvas. After all, it is encapsulated like the Vue framework. Just call the API.

This study of createjs is different from the past. Before, it was mainly to follow other people’s ideas: either pure tutorial or video. And follow others, although it seems to save time, but for the overall context of technology will be more one-sided, just master the teaching materials in the technology.

This time, I mainly read the official documents, then took notes and digested the main API. This learning style is more efficient than the above, and the learning style is also sustainable.

Of course, this learning method also has a premise. It’s better to have complete official website documents. It’s easy to start teaching. It’s too difficult to use other methods.

3、 Vue + JS: preview moves smoothly with scroll bar

Technical points

  1. Product requirements are very simple, only the preview can be dragged. Think about making an effect that moves with the scroll bar by the way, so the experience will be better.
  2. Technical difficulties:
  • Get the height of global and local scroll bars in mounted
  • Because it is in the case of operating DOM in a Vue project and not using jQuery. In order to make the scroll bar move smoothly, the online segmentation method is adopted here, and then recursion is used to increase or decrease.
  • When it comes to rolling up and down, the critical point of rolling. If you roll up and down quickly, jitter will occur. I’ve locked it, and I’ve kept the critical points apart for a few minutes to avoid it.
  • To keep the scroll bar at the bottom, use: scrolltop = scrollheight clientheight

Code reference

<template>
    < div class = "content" ref ='mobileref] // fixed height
        <div class='content-scroll' ></div>
    </div>
</template>

<script>
    data () {
        return {
            once: true
        }
    },
    mounted() {
        //Monitor the div element scroll bar in the page
        // this.$refs.mobileRef.addEventListener('scroll', ()=>{
        //         console.log('scrollHeight', this.$refs.mobileRef.scrollHeight)
        //         if(this.form.backgroundImg) {
        //             this.$refs.mobileRef.scrollTop = this.$refs.mobileRef.scrollHeight 
        //         }
        //         console.log(" scroll " + this.$refs.mobileRef.scrollTop)
        // }, false)
        this.$nextTick(function () {
            Window. Addeventlistener ('scroll ', this. Onscroll) // listen to the scroll bar
        })
    },
    methods: {
        onScroll () {
            let that = this
            Let scrolled = document.documentelement.scrolltop | document. Body. Scrolltop // get the scroll bar srcolltop
            let step = ''
            if(this.form.backgroundImg) {
                Let divheight = that. $refs. Mobileref. Scrollheight // the scroll bar height of the left element
                Let divclient = that. $refs. Mobileref. Clientheight // the height of the scroll bar itself
                Step = divheight / 50 // smooth scrolling, set 50, and then set the timer to change every 10 seconds
                If (scrolled < 705 & & this. Once = = false) {// the once lock must be global and cannot be set in the onscroll method
                    smoothUp()
                }Else if (scrolled > 710 & & this. Once = = true) {// in order to form a mutually exclusive effect, both sides need to determine the height of the scrolled and the mutually exclusive lock
                    smoothDown()
                }
         
                function smoothDown() {

                    If (that. $refs. Mobileref. Scrolltop < divheight divclient) {// divheight divclient is the maximum height of srcoltop
                        that.$refs.mobileRef.scrollTop += step
                        //Recursion, it will be called until return false. The exit of recursion is: that. $refs.mobileref.scrolltop = divheight divclient
                        setTimeout(smoothDown, 10)                         
                    } else {
                        SetTimeout (() = > {// the lock has a timer set, which is mainly to prevent the jitter behavior of scrolled node in 710 from sliding up and down quickly
                            that.once = false
                        }, 200 )
                    }
                }
                function smoothUp() {
                    if(that.$refs.mobileRef.scrollTop > 0) {
                        that.$refs.mobileRef.scrollTop -= step
                        SetTimeout (smoothup, 10) // the exit of recursion is: that. $refs. Mobileref. Scrolltop = 0
                    } else {
                        setTimeout(()=>{
                            that.once = true
                        }, 200 )
                    }
                }
            } 
        }
    }

</script>

Recommended Today

Comparison and analysis of Py = > redis and python operation redis syntax

preface R: For redis cli P: Redis for Python get ready pip install redis pool = redis.ConnectionPool(host=’39.107.86.223′, port=6379, db=1) redis = redis.Redis(connection_pool=pool) Redis. All commands I have omitted all the following commands. If there are conflicts with Python built-in functions, I will add redis Global command Dbsize (number of returned keys) R: dbsize P: print(redis.dbsize()) […]