Video page header construction
First of all, the structure of the head is like this
The Taobao double-flying wing layout is used here. Both ends are fixed, and the middle is self-adaptive.
Let’s talk about this flex here: 1
flex-grow: stretchable flex-shrink: compressible flex-basis: the width of the current element
flex default: flex-grow: 0, flex-shrink: 1, flex-basis: auto
flex:1 flex-grow:1,flex-shrink:1,flex-basis:0%
flex:auto flex-grow:1,flex-shrink:1,flex-basis:auto
flex:1 will cause the width of the parent element to automatically be 100%
Static construction of video navigation area
Here we write the data to death, and then we find that display:flex is invalid, we need to add enable-flex attribute to it
Dynamic display of navigation data
Look at the documentation to know
The interface accessed is /video/group/list
Write the corresponding method
The data is successfully rendered to the page, but each one adds the active class. We need to write a dynamic
Pass the parameter by id to judge whether it is the same, if the same, give the class, otherwise it is empty
Here we can also use the right shift operator
Right shifting zero bits will coerce non-number data to number
And we want to start the first item with a lower border, we can set it directly when getting the navigation data
Get video data through cookie
First, let's run our background server
Then look at the documentation
We need to get the user's cookie first. One thing to note here is that if the cookie is empty, you can log in again to get the cookie
We store cookies locally in request.js.
Then we carry the cookie in the response header
This cookie has many values, and we only need the first of them
Write it down first, I don’t know why I didn’t get the value of the cookie
Dynamic display of video list
It seems that my visitor log in does not get the video list with the help of cookies, but directly gets it in a hard-coded way
It seems that the previous part was written in vain. The urlInfo video is empty. We may need to change the interface.
I looked at this and it seems to be ok, but only one can be fetched. Turn on self-deception mode
Click to switch video function to achieve
The original function is to click the nav above, and the corresponding video will be displayed below. And if we use the hard-coded method, it will definitely have no effect. So we do something like
Originally, there may be a problem of network delay in the switch. So we need to add a wx.showLoading. Indicates that a loading
Here we need to close the message box manually.
Implementation of navigation transition effect
Here we need to use this
It is controlled by means of id. But this has no transition effect
We can use this property to control
This has a transition effect