Quasar Framework

terumi

If you are on cordova, you can add a setTimeOut to, say 10 ms, because the new route hasn’t been loaded already. After the 10ms expiry the screen will jump to the desired position.

terumi

Hello people.
Last weekend I tried to implement swipable tabs navigation with q-route-tabs.
What I found is that if you change a tab, the window.scrolltop is always shared by every page.
That said, you cannot scroll a page, go to another page, scroll through it and return to the previous one and continue from where you left it.

The closest thing I succeeded in doing is to save each tab position in a window.positions array variable and after route change to apply the stored scrolltop value for each tab.

Now what I want to do is to flip through tabs using swipe. And during this swipe I want both pages, previous and next to be shown. Same as the Twitter app, or Instagram.
Can this be accomplished in any way?

terumi

Ok,
I first installed the status bar cordova plugin,

cordova plugin add cordova-plugin-statusbar

and then, in the cordova/config.xml I added these lines:

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#F44336" />

And everything is ok now

More on…
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/index.html

terumi

@matt said in change status bar color according to quasar theme in mobile version:

I think the problem is the ‘theme-color’ meta tag in index.html

Can you try to locate / add this to the <head> section:
<meta name="theme-color" content="#db5945">
Replace the color with the one that you want and it should work.

I did the same thing

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="theme-color" content="#f44336">
    <title>Quasar App</title>
</head><head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="theme-color" content="#f44336">
    <title>Quasar App</title>
</head>

And after that when I build my app on my device, the status bar is still on its default color.
Any ideas?

Thank you.

terumi

Hello people,
This is my first post on the forum.

So far I’ve created an application with tabs and by using
<router-view> I’ve managed to change pages.
So far, so good.

By using the info in http://forum.quasar-framework.org/topic/150/v-touch-swipe-issue now I’m implementing a swipe functionality to make navigation more intuitive.

Although I’ve read the vue-route documentation and being able to access this.$router in my code and to push new routes in the router stack, I’m a little bit confused on how to implement this:

I have a main page, a favorite page and a search page with subpages.
If you click on
main page
then on favorite
on search
on a search subpage#1
on a search subpage#2
on favorite
on home
on favorite

and then start pressing (or swiping) back the default behaviour is to go from
favorite to home,
to favorite,
to search subpage#2,
to search subpage#1
to search
to favorite,
to main
and then exit.

What I want to achieve is this:
If you are on a subpage, I want the back button to follow the tree until it reaches the root page (in this case, the search).
If you are on the root page (search, favorites etc) the back button should go to main page and then exit.

I thought I could check for the current page and if its a “root” page, I could redirect to main
or if not, I could do a this.$router.go(-1) until I reach a “root” page, then go to main, then exit (which is something that I don’t know how to do yet).

How would you go about it?

Thank you.

terumi

@terumi

Posts made by terumi