frandiox / OnsenUI-Todo-App

Onsen UI 2.0 To-Do sample application implemented in Vanilla JavaScript.
MIT License
100 stars 74 forks source link

Tab-bar components looks not good on some versions of Android phone. #1

Closed honglio closed 8 years ago

honglio commented 8 years ago

Thanks for providing such great sample app to demonstrate the greatness of v2.0 of OnsenUI. The codes are well organized and the service.js is a good design which makes the code more readable. But I find tab-bar components looks not good on some versions of Android phone. Here are the image links.

[deviceInfo_1]http://chuantu.biz/t2/30/1457145760x2016702825.jpg [tabbar_1]http://chuantu.biz/t2/30/1457146579x2016702855.png

[deviceInfo_2]http://chuantu.biz/t2/30/1457146649x2016702855.png [tabbar_2]http://chuantu.biz/t2/30/1457146689x2016702855.png

PS: This App can't work on Android version 4.0.4, only the toolbar on the top of the screen and nothing else shows. Nothing happened when clicked on any part of the screen.

frandiox commented 8 years ago

@honglio I'm glad you liked it :) Thank you very much for the complete feedback! That looks like a problem in the new beta rather than in the app itself. I guess we need to check the new CSS styles to make them work better on old devices. And probably the 4.0.4 is crashing for some reason. I'll try to debug it on next week when I have access to some devices.

Thanks!

frandiox commented 8 years ago

@honglio I fixed yesterday the problem on 4.0.4 and it doesn't crash anymore. About the glitches, I think those are fine in crosswalk so there shouldn't be any problem. Have you tried it with crosswalk?

honglio commented 8 years ago

@frankdiox Currently we use X5 instead of native webview. In X5, the tabbar doesn't have the glitches on device 1, but still has the glitches on device 2. We may switch to crosswalk if it's necessary in future.

In recent commit, you removed the fixtures create function from the Peding Page Controller, and added it after the Peding Page Controller function called. Could you explain a little about when the init event fire and how the controller function worked? I just want to know how the page initialization process goes.

frandiox commented 8 years ago

@honglio ons-page fires a init event when it's attached to the DOM, and it's supposed to be attached only once in its lifecycle. Therefore, you can make the initialization process of a page in its init event.

The problem with the fixtures is that adding new data modifies not only Pending Page but also Menu Page (to add new categories if needed). All these processes are asynchronous so we cannot ensure that Menu Page is attached before Pending Page, so we need to make sure that both of them are ready before adding the initial data. This is why I moved the fixtures to the new place, because there the initial data will be added when both the Menu Page and Pending Page are ready (specifically, when the last of them becomes ready/attached).