weex wxc-navpage 导航栏标签在android、iOS下的使用问题。
wxc-navpage:
标签在实际中是否有使用的规范:
以下是在实践中使用中用了两种不同的写法导致了android、iOS不同的呈现效果,不知道有没遇到过相同问题的人?
第一种写法
<template>
<wxc-navpage title="首页">
<div>
<text>内容</text>
</div>
</wxc-navpage>
</template>
android:weex debug 呈现效果如下:
导航栏下出现了一段空白
android:真机运行 呈现效果如下:
导航栏下的内容显示空白像是没有成功渲染。
iOS:模拟器呈现效果 正常。
iOS:weex debug 呈现效果
第二种写法
<template>
<wxc-navpage title="首页"></wxc-navpage>
<div>
<text>内容</text>
</div>
android:weex debug 呈现效果 正常
android:真机呈现效果 正常
iOS:模拟器呈现效果
导航栏和内容全部空白。
iOS:weex debug 呈现效果 正常
希望遇到类似问题的大神帮助指导下,谢谢了。
最终的代码:
<template>
<div>
<wxc-navpage title="首页" background-color="#3683FF" onclick="onClickTitle" title-color="#FF0000" left-item-title="搜索" left-item-color="#EA80FF" right-item-title="跳转" right-item-color="#EA80FF"></wxc-navpage>
<list style="margin-top: {{height}};">
<refresh class = "refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
<text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh </text>
<loading-indicator class="indicator"></loading-indicator>
</refresh>
<cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{rows}}" index="{{$index}}">
<div class="item">
<text class="item-title">row {{id}}</text>
</div>
</cell>
<loading class="loading-view" display="{{loading_display}}" onloading="onloading">
<text if="{{(loading_display==='hide')}}">↑ Loadmore </text>
<loading-indicator class="indicator"></loading-indicator>
</loading>
</list>
</div>
</template>
<style>
.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;
}
</style>
<script>
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}
]
}
}
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
问题已经解决,由于更新weex 时并没有重新对project 安装新的依赖 npm install
由于依赖存在差异,导致weex compile 编辑成js文件时, 针对Wex-nvrpage 标签下内容处理例子不一样。结论是对mac window 下各自生成的js 文件对比得出。
问下我从native的weex里push到新的weex,上面的导航条设置wxc-navpage没效果,显示的是系统的导航栏 也隐藏不掉 这个您是怎么处理的?
有demo没?大神