Wap Q & A system work summary and wap Q & A work summary

Wap Q & A system work summary and wap Q & A work summary
I have been trying to find a chance to exercise myself, but I am panic. I am afraid that my abilities are too bad, I cannot grasp the opportunity, and I will make things worse. Finally, I want to implement the wap Q & A system. I have already said a few people are doing it together. I analyzed the page and found that there are still many common parts and I have some ideas. If I want to do this, it is not difficult to look at the layout, but I am not sure about it. I have been hesitating and struggling. Finally, I had the courage to ask me to do it. Although I was not confident enough, I still said it. The product made me estimate the time. I was a little flustered in an instant. I had almost never done any projects, and I didn't know how long I could do it. I am arrogant. What about 6 days? The page is a little repetitive. Do you need five days or four days? So, I am very unconfident to tell the product, four or five days ~ "How is it possible? Up to next Monday !" I was surprised by a single product sentence. At that time, it was more than four o'clock P.M. on Wednesday, so it would be more than three days. I bit my teeth: "OK! Give it to me! I have to work overtime ." Maybe my resolute attitude is a little abnormal and the product is surprised! These pages look not difficult. Many of them have the same layout, But I have spent a lot of time and made a lot of detours. Here there are several layer switches, so I want to simulate the write layer sliding effect written by my colleagues. Set the width of 400% for the external layer, overflow: hidden, where each layer is 25%. When you click classification, use translateX to slide the external layer. This effect has been written for a long time, and it is very difficult. When I cannot write it, I copied the layout of others' div and css styles completely. This approach is very bad, I don't understand how this works. I am blind in the copy process and try to copy less in the future. However, after this, I learned the layout. When I wrote this result, I was still complacent. Haha ~ Right away, I found the problem. This data list needs to be pulled down and refreshed to pull up and load it! The layout I wrote earlier is completely unavailable ~ It took me so long to get crazy! I have never written a pull-down refresh or pull-up refresh. This demand has also plagued me. I chose to use mui to write this effect. View the mui official documentation, learn from the pages written by colleagues, first initialize mui's pullrefresh, then call and transmit parameters, and splice them together to write out this effect. But what should I do when switching the layer? After a long time of tossing, I understand that this layer switch cannot be switched with multiple div, pull-down refresh, pull-up loading needs to be in a layer, when switching layer, You need to request data again, clear mui-table-view and append the data again. But there is another problem, that is, how to trigger the mui drop-down to refresh the new request data when switching the layer. I have been searching for this issue for half a day in the official documentation. After a day, I was also drunk ~ Finally, Baidu easily found the answer. The code for triggering the pull-down refresh event is: mui ('. box '). pullRefresh (). pulldownLoading (); The mui documentation is weak! Super bad! It seems that the blog we wrote is still very good, haha! The mui refresh triggered by switching the light layer for another day (Saturday has passed ). There is also a horizontal slide on the home page. In the mui drop-down and refresh container, the effect of the previously written Normal Left and Right drag layers becomes invalid. I thought about using mui. Baidu found a lot and finally found the keyword "area rolling-Horizontal Rolling". I read the official documents and added some styles, which didn't work ~ Find the answer in the blog and initialize the scroll event as follows. Pay attention to the location of this Code, which should be placed after the pull-down refresh call. The specific reason is unknown ~ Sorry!

// Initialize mui ($ ('. course-wrap ')). scroll ({scrollX: true, scrollY: false, indicators: true, deceleration: 0.0005 // flick deceleration Coefficient. The larger the coefficient, the slower the rolling speed and the smaller the rolling distance, default Value: 0.0006 });

 

So far, the home page and list page are basically complete, and their layout is similar. Many of the mui pitfalls are also very deep. Every time it takes a long time to climb out, I collapsed when I got mui. Fortunately, it was finally solved. When writing this page, the background image under the Avatar must be filled with a div, and the background-size: 100% should be set. This Code only fills the background image with a width of 100%. Pay attention to whether the height is filled, the correct value should be background-size: 100% 100%. The requirement of the product is that the layer can be switched by sliding. When sliding to the top, the line of my question should be attached to the header. After writing for one day, I did not adjust this effect. I had to communicate with the product, changed the requirement, made two portals, and clicked to enter the new page. I couldn't do that, resulting in poor products, uncomfortable feelings, crying sadly, ah, so sad. Suddenly I forgot two more buttons, and the summary was almost done. Add the buttons!