This article introduces you to the vueJs implementation that automatically drops down to the bottom after the DOM is loaded. The article records the entire problem process for you. For those who are interested in the implementation ideas, please read the article.
/.....................................renew..................................../
This problem was encountered a long time ago, but later I thought it was actually a very simple problem. After the dom record is completed, it will automatically pull down to the bottom, just use(() => {})Functions are just for this, because vue is a virtual dom and will not update the dom in real time. nectTick() is the callback registered after the next update of the dom.
Looking at my problem, the reason why such a problem actually ajax is the asynchronous execution problem.
/.................. Updated....../
The work project is based on the vueJs framework. It encounters a requirement: there is a component that will request a set of data from the server through ajax when it is created, display it in a list form, and automatically pull it down to the bottom.
Implementation idea: First, figure out the life cycle of the vueJs component, as shown in the figure below. After posting, I found that the picture was missing... It seems that I can't put pictures here, it's just the life cycle and hook of vueJs. Readers can Baidu it on their own, it's everywhere.
No introduction to specific details, please look at the pictures by yourself or turn right on the official website to find them/
Knowing the life cycle and corresponding to the needs, it is natural to pay attention to the three periods beforeCreate, mounted, and updated.
1. BeforeCreate period
This period is equivalent to doing some initialization work, and it is most appropriate to do ajax at this time. The code is as follows:
beforeRouteEnter(to, from, next) {
next(function(vm) {
if ( == 0) {
//Implement ajax here ();
}
});
}
The code was written before, using the beforeRouteEnter hook (vm: Because the component may not have been created at this time, this cannot be used instead, and vm is used instead. The code executed by vm will be executed after it is created.). This hook will be called before entering the component page through vue-route route. The requirement is that only the first entry needs to be automatically executed. Therefore, we also judge whether the length of data is 0. When writing a blog, it is found that if you use the beforeCreate hook, there should be no more trouble, but it is just a guess. Please verify it yourself.
2. Mounted period
This hook will be called after the template (html) is compiled and mounted. At the beginning, what I thought was to implement an automatic scrolling to the bottom here, but I found that it would not work. Why? Because ajax is an asynchronous operation, ajax is executed during the beforeCreate period, and it cannot guarantee that the data has been sent back when mounted, so it is meaningless to do a pull-down operation at this time.
3 updated period
This hook changes data when the component object data changes, and I change data in the ajax success callback function, so it should be appropriate to call it at this time. However, after implementation, there was another problem. Each time you automatically pull down to the bottom, you can only pull down to the bottom of the original data list, and the newly added items are still below. For example
4 (Ajax new acquisition)
Each time the ajax pull-down operation is executed at updated, it will automatically pull down and scroll, and it will only reach the 4, not the 5 position. The reason is that when updated is executed, hitting it is just a data change, and it is possible that the document has not been rendered, which can not process newly added items, but vue does not provide a rendering hook.
I searched for a lot of information on the Internet. Some information is more reliable. SetTimeout(). However, the page will have a noticeable beating and flashing citrus, which affects the user experience. My processing is:
updated() {
let count = 0;
let interval = setInterval(() => {
if (count > 3000) {
clearInterval(interval);
= false;
}
count++;
if ( != ) {
= ;
if ( == ) {
clearInterval(interval);
= false;
}
}
}, 0);
}
This principle should be very simple, and you can understand it by reading the code.
Summarize
The above is the example code that the vueJs implementation automatically drops down to the bottom after loading the DOM. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!