navigator - 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>

解决方案

问题已经解决，由于更新weex 时并没有重新对project 安装新的依赖 npm install
由于依赖存在差异，导致weex compile 编辑成js文件时， 针对Wex-nvrpage 标签下内容处理例子不一样。结论是对mac window 下各自生成的js 文件对比得出。

这篇关于navigator - weex wxc-navpage 导航栏标签在android、iOS下的使用问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！