android 标签导航栏,weex wxc-navpage 导航栏标签在android、iOS下的使用问题。

wxc-navpage： 标签在实际中是否有使用的规范：

以下是在实践中使用中用了两种不同的写法导致了android、iOS不同的呈现效果，不知道有没遇到过相同问题的人?

第一种写法

内容

android：weex debug 呈现效果如下：

导航栏下出现了一段空白

android：真机运行 呈现效果如下:

导航栏下的内容显示空白像是没有成功渲染。

iOS：模拟器呈现效果 正常。

iOS：weex debug 呈现效果

第二种写法

内容

android：weex debug 呈现效果 正常

android：真机呈现效果 正常

iOS：模拟器呈现效果

导航栏和内容全部空白。

iOS：weex debug 呈现效果 正常

希望遇到类似问题的大神帮助指导下，谢谢了。

最终的代码：

↓ pull to refresh

row {{id}}

↑ Loadmore

.refresh-arrow {

font-size: 30px;

color: #45b5f0;

}

.row {

width: 750;

}

.item {

justify-content: center;

border-bottom-width: 2;

border-bottom-color: #c0c0c0;

height: 100;

padding:20;

}

.item-title {

}

.refresh-view {

width: 750;

height: 100;

display: -ms-flex;

display: -webkit-flex;

display: flex;

-ms-flex-align: center;

-webkit-align-items: center;

-webkit-box-align: center;

align-items: center;

}

.loading-view {

width: 750;

height: 100;

display: -ms-flex;

display: -webkit-flex;

display: flex;

-ms-flex-align: center;

-webkit-align-items: center;

-webkit-box-align: center;

align-items: center;

}

.indicator {

height: 60;

width: 60;

color: #889967;

}

require('weex-components');

var modal = require('@weex-module/modal');

module.exports = {

methods: {

ready: function(){

var config = this.$getConfig();

// modal.toast({"message":config.env.platform,'duration':5});

if(config.env.platform=='android'){

this.height='88';

}

},

onappear: function (e) {

var appearId = this.rows[e.target.attr.index].id;

nativeLog('+++++', appearId);

var appearIds = this.appearIds;

appearIds.push(appearId);

this.getMinAndMaxIds(appearIds);

},

ondisappear:function (e) {

var disAppearId = this.rows[e.target.attr.index].id;

nativeLog('+++++', disAppearId);

var appearIds = this.appearIds;

var index = appearIds.indexOf(disAppearId);

if (index > -1) {

appearIds.splice(index, 1);

}

this.getMinAndMaxIds(appearIds);

},

getMinAndMaxIds:function (appearIds) {

appearIds.sort(function(a, b) {

return a - b;

});

this.appearIds = appearIds;

this.appearMax = appearIds[appearIds.length - 1];

this.appearMin = appearIds[0];

},

onrefresh: function(e) {

var self = this;

self.refresh_display = 'show';

self.$call('modal', 'toast', {

'message': 'onrefresh'

});

this.$call('timer', 'setTimeout', function () {

self.refresh_display = 'hide';

}, 3000);

},

onloading: function() {

var self = this;

self.loading_display = 'show';

self.$call('modal', 'toast', {

'message': 'onloading'

});

this.$call('timer', 'setTimeout', function () {

if (self.rows.length <= 33) {

self.rows.push(self.moreRows[self.rows.length - 29]);

}

self.loading_display = 'hide';

}, 3000);

},

},

data: {

height:'0',

refresh_display: 'hide',

loading_display: 'hide',

appearMin:1,

appearMax:1,

appearIds:[],

rows:[

{id: 1},

{id: 2},

{id: 3},

{id: 4},

{id: 5},

{id: 6},

{id: 7},

{id: 8},

{id: 9},

{id: 10},

{id: 11},

{id: 12},

{id: 13},

{id: 14},

{id: 15},

{id: 16},

{id: 17},

{id: 18},

{id: 19},

{id: 20},

{id: 21},

{id: 22},

{id: 23},

{id: 24},

{id: 25},

{id: 26},

{id: 27},

{id: 28},

{id: 29}

],

moreRows: [

{id: 30},

{id: 31},

{id: 32},

{id: 33}

]

}

}