记录vant weapp 小程序组件库遇到的坑以及ios和安卓兼容问题 SubmitBar

组件一：SubmitBar 提交订单栏IOS不显示，安卓正常

前情提要（可忽略）

因为项目比较着急，正好这个组件跟设计图类似，欣喜万分，拿来即用。然鹅，现实跟想象中真是完全不同。
IOS上完全不展示这个组件，安卓正常。苦恼万分，想着只是css问题（想着vant不可能有这种不显示的bug），浪费半天时间，无果。第二天头脑清醒的把组件拿到别的页面尝试，竟然能展示。

问题及解决

最终，判定是因为SubmitBar 放在了tab标签里面（放在tab里面的原因是其中一个tab需要底部submitBar，另一个不需要）。如果放在tab里面IOS就会有问题，放在外层就正常。

<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="标签 1">
  	//千万不能在这里放入,如果在这里放入 van-submit-bar组件则安卓正常 ios完全不展示
  	<van-submit-bar
	  price="{{ 3050 }}"
	  button-text="提交订单"
	  bind:submit="onSubmit"
	/>
  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

//放在外层即可，可添加判断条件何时展示
<van-submit-bar
  price="{{ 3050 }}"
  button-text="提交订单"
  bind:submit="onSubmit"
/>

组件二: flex布局 （Layout 布局）

这个其实跟vant没有太大关系，但是也有一点点关系，因为在实践过程中，发现如果用了flex布局或者vant layout组件, ***如果不在flex box父级多加一层view标签，IOS就会有问题，安卓正常……***，
这个问题也是很迷茫，开始比较着急用的是比较笨的方法，判断是IOS就多增加一个类样式。
第二天清醒了，发现多包一层view标签就OK.呵呵……

组件三 scroll-view组件问题

这个主要是小程序组件兼容问题，ios正常，安卓有滚动条，去除滚动条即可

::-webkit-scrollbar  
{  
  width: 0;  
  height: 0; 
  color: transparent;  
} 

组件四 Search 搜索

由于设计图 的检索方式类似于某宝顶部，点击搜索框进入搜索页，所以首页是检索框是无任何功能的，开始用了Search 组件，点击跳转至搜索页，但是会先弹出键盘，瞬间再进行跳转页面，用户体验不好，后来就直接将首页的搜索框转为div，自己写了一个检索框样式。

组件五： Cell 单元格

这种单元格也是我们常用的组件之一，在demo中的边框不明显，开发工具也几乎看不到，在真机测试中那个border相当明显啊，有些时候该去掉一定要记得去掉 border="{{ false }}"。

<van-cell title="单元格" is-link value="内容"  border="{{ false }}"/>

Tabbar 标签栏

标签栏也是常用组件之一，比如在商城项目中用于展示 待付款 待发货等按钮。如下图是常用组合；

在开发工具展示跟你看到的几乎一致，但是手机里看到莫名其妙标签栏多了上下2个边框！！！
后来才发现上边框是cell的border, 利用 border="{{ false }}" 去掉即可，下边框哪来的呢！！！小程序开发工具有时候还不展示伪元素样式。后来发现确实有！为了增加权重给van-tabbar增加了类，具体如下：

//wxml
<van-tabbar custom-class="order-list-tabbar" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
//wxss
.order-list-tabbar.van-hairline--top-bottom::after,.order-list-tabbar.van-hairline--top-top::after{
  border: none;
}

自定义导航栏问题

自定义导航栏涉及到不同手机顶部状态栏高度不同，需要根据机型判断。这里也是找到了优快云大佬分享的内容，我一并总结到这里给大家分享了。

//第一步：在需要自定义导航栏页面JSON配置中修改为自定义导航栏
"navigationStyle": "custom",
//第二步： 在app.js中增加获取系统导航栏高度方法
/**
 * 获取系统导航栏高度 安卓默认是48px,ios是44px,其他机型基本都是44px
 * @param {*} 
 */
  getSystemInfo: function(){
  	let that = this;
    wx.getSystemInfo({
      success (res) {
        that.globalData.statusBarHeight=res.statusBarHeight;
        if(res.platform=="android"){
          that.globalData.toBar=48;
        }else{
          that.globalData.toBar=44;
        }
        console.log(that.globalData)
      }
    })
  },
  globalData: {    
    statusBarHeight:0, //状态栏高度
    toBar:44, //标题栏高度，如果有标题 记得设置标题栏文字居中，行高等于标题栏高度哦
  }
  //第三步：即可在任意页面获取app.globalData中的状态栏高度和标题栏高度啦
  //例如index.js中
  // 获取应用实例
const app = getApp();
Page({
  data:{
  	// 获取导航栏高度
    statusBarHeight: 10,//自定义默认
    toBarHeight: 44,
  }
  onLoad(){
	this.setData({
      statusBarHeight: app.globalData.statusBarHeight,
      toBarHeight: app.globalData.toBar
    })
  }
})//page

第一种情况：有标题
//wxml页面 标题栏文字居中，高度和行高为标题栏高度，距离页面顶部为状态栏高度大小
<view style="padding-top: {{statusBarHeight}}px;height: {{toBarHeight}}px;line-height: {{toBarHeight}}px" class="navigation-title">自定义导航栏标题</view>
//正文部分,margin-top要大于状态栏和标题栏高度总和，我额外加了10px
<view class="content"  style="margin-top: {{statusBarHeight+toBarHeight+10}}px"></view>

第二种：无标题 但是左上角有返回按钮
根据上面的情况，宝宝们自由发挥吧，在此我就不粘贴了。

未完待续……