You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by 友夏 <84...@qq.com> on 2017/04/01 14:26:22 UTC
How to set the scroller's height ina vue page with fixed bottom tabbar ?
I write a vue page according to the weex-hackernews example https://github.com/weexteam/weex-hackernews.
This page has top and bottom tab bar, the middle area is used to show contents with scroller.
How could I set the scroller height? My android phone's deviceHeight is 1776px，and deviceWidth is 1080px。
The tab bar's height is 160px。
So I set the scroller's height to 1011px, which is caculated by (1776-160-160)/(1080/750)=1011px。
But the scroller can not scroll to the end.
Here is the vue page：
<template>
<div class="page">
<div style="clear:both;">
</div>
<scroller style="overflow:hidden;height:1011">
<div class="main">
<text class="line">line 1</text>
<text class="line">line 2 - deviceWidth-{{$getConfig().env.deviceWidth}}</text>
<text class="line">line 3 - deviceHeight-{{$getConfig().env.deviceHeight-}}</text>
<text class="line">line 4</text>
<text class="line">line 5</text>
<text class="line">...</text>
<text class="line">222</text>
<text class="line">111</text>
<text class="line">The end</text>
</div>
</scroller>
<div class="headerW">
<div class="item">
<div>
<text>tab1</text>
</div>
</div>
<div class="item">
<div>
<text>tab2</text>
</div>
</div>
<div class="item">
<div>
<text>tab3</text>
</div>
</div>
</div>
<div class="footerW">
<div class="item">
<div>
<text>tab111</text>
</div>
</div>
<div class="item">
<div>
<text>tab222</text>
</div>
</div>
<div class="item">
<div>
<text>tab333</text>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.item{
flex:1;
justify-content: center;
align-items:center;
border-width:1;
}
.line {
height:50;
}
.page {
margin:2px;
border:0; padding:0;
background-color: #234;
flex-direction: column;
overflow:hidden;
}
.headerW{
flex-direction: row;
height:160;
background-color:#ABC;
left:0;
top:0;
position: fixed;
width:750;
}
.footerW{
flex-direction: row;
height:320px;
background-color:#987;
bottom:0;
left:0;
position: fixed;
width:750;
}
.main {
margin-top: 160;
}
</style>
Re: How to implement post request in Native Android with
weex-hackernews example
Posted by sospartan <so...@apache.org>.
hi,
axios is a 'Promise based HTTP client for the browser and node.js', you can
not use it in weex native. Weex provide stream module do the same thing.
See more here http://weex.apache.org/references/modules/stream.html
On Mon, Apr 10, 2017 at 7:48 PM, 友夏 <84...@qq.com> wrote:
> Hi,
> The following code can be run in browser, but has no responce when i
> packaged it in apk with android mobile phone.
> Does axios not support Native Android ?
>
> Thanks
>
> youxia
>
>
> import axios from 'axios';
> var querystring = require('querystring');
>
> ...
>
> var this_page = this;
> var params = { username:'username1'};
> var paramsStr = querystring.stringify(params)
>
> axios.post('https://www.aganinfo.com/ag/dazhai/posttest.do',
> paramsStr
> )
> .then(function (response) {
> this_page.result = "OK";
> })
> .catch(function (response) {
> this_page.result = "ERR";
> });
--
Best Regards!
------------------------------
sospartan
https://weex-project.io
How to implement post request in Native Android with weex-hackernews example
Posted by 友夏 <84...@qq.com>.
Hi,
The following code can be run in browser, but has no responce when i packaged it in apk with android mobile phone.
Does axios not support Native Android ?
Thanks
youxia
import axios from 'axios';
var querystring = require('querystring');
...
var this_page = this;
var params = { username:'username1'};
var paramsStr = querystring.stringify(params)
axios.post('https://www.aganinfo.com/ag/dazhai/posttest.do',
paramsStr
)
.then(function (response) {
this_page.result = "OK";
})
.catch(function (response) {
this_page.result = "ERR";
});
Re: How to set the scroller's height ina vue page with fixed
bottom tabbar ?
Posted by Adam Feng <cx...@gmail.com>.
Actually, the computing height seems to be right.
I have fixed some exception in the demo, and run it in http://dotwe.org/vue/1f0c30a2402dcfd6bf9315ba5e23c468, it seems to behave right in iOS.
@sospartan any ideas about the problem?
Thanks.
Adam Feng
On 2017年4月1日 +0800 PM10:26, 友夏 <84...@qq.com>, wrote:
> I write a vue page according to the weex-hackernews example https://github.com/weexteam/weex-hackernews.
> This page has top and bottom tab bar, the middle area is used to show contents with scroller.
> How could I set the scroller height? My android phone's deviceHeight is 1776px，and deviceWidth is 1080px。
> The tab bar's height is 160px。
> So I set the scroller's height to 1011px, which is caculated by (1776-160-160)/(1080/750)=1011px。
> But the scroller can not scroll to the end.
>
> Here is the vue page：
>
> <template
> <div class="page"
> <div style="clear:both;"
> </div
> <scroller style="overflow:hidden;height:1011"
> <div class="main"
> <text class="line">line 1</text
> <text class="line">line 2 - deviceWidth-{{$getConfig().env.deviceWidth}}</text
> <text class="line">line 3 - deviceHeight-{{$getConfig().env.deviceHeight-}}</text
> <text class="line">line 4</text
> <text class="line">line 5</text
> <text class="line">...</text
> <text class="line">222</text
> <text class="line">111</text
> <text class="line">The end</text
> </div
> </scroller
>
> <div class="headerW"
> <div class="item"
> <div
> <text>tab1</text
> </div
> </div
> <div class="item"
> <div
> <text>tab2</text
> </div
> </div
> <div class="item"
> <div
> <text>tab3</text
> </div
> </div
> </div
>
> <div class="footerW"
> <div class="item"
> <div
> <text>tab111</text
> </div
> </div
> <div class="item"
> <div
> <text>tab222</text
> </div
> </div
> <div class="item"
> <div
> <text>tab333</text
> </div
> </div
> </div
> </div
> </template
>
> <style scoped
> .item{
> flex:1;
> justify-content: center;
> align-items:center;
> border-width:1;
> }
> .line {
> height:50;
> }
> .page {
> margin:2px;
> border:0; padding:0;
> background-color: #234;
> flex-direction: column;
>
> overflow:hidden;
> }
>
> .headerW{
> flex-direction: row;
> height:160;
> background-color:#ABC;
>
> left:0;
> top:0;
>
> position: fixed;
> width:750;
> }
>
> .footerW{
> flex-direction: row;
> height:320px;
> background-color:#987;
>
> bottom:0;
> left:0;
>
> position: fixed;
> width:750;
> }
> .main {
> margin-top: 160;
> }
>
> </style