记录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-barprice="{{ 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-barprice="{{ 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;
}

自定义导航栏问题

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

//第一步：在需要自定义导航栏页面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>第二种：无标题 但是左上角有返回按钮
根据上面的情况，宝宝们自由发挥吧，在此我就不粘贴了。

未完待续……

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

如何从Vant Weapp、MinUI、iView Weapp、Wux Weapp、ColorUI共5个小程序组件库选型转载
前言发展到今天,手机端组件库其实已经大同小异,熟练的程序员甚至都能背过80%的组件名称,比如toast.cell.checkbox--,来来回回就是这么些,那么,面对市面上最火的5个小程序组件库,我 ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
Vant Weapp小程序蹲坑之使用card组件显示价格
问题在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多.网络上所谓的"坑"总结,仅仅不过是其开发中所遭所遇之"坑"而已--估计后面的&quo ...
可定制的小程序组件库：Wux Weapp
可定制的小程序组件库:Wux Weapp 介绍 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序UI组件库.提供了超过70个实用组件,帮助开发者提高开发效率.在上线的16个月以来,我们持续 ...
api 微信小程序组件库colorui_微信小程序常用的几个UI组件库
1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progre ...
Yeo小程序组件库（v1.0）
经过一个月左右的组件摸索,一方面是在巩固对小程序的使用,另一方面也是希望将一些实用的.有意思的组件记录下来,以便下次使用,虽然项目可能还存在许多的bug或者健全性问题,希望大家如果有发现问题,欢迎指正 ...
从0到一开发微信小程序（7）—小程序组件库(提高开发效率)
文章目录其他相关文章 1.组件库 1.1.TDesign 引入TDesign 使用 NPM 修改 app.json 使用组件 TDesign的应用 Rate 评分 Sticky 吸顶容器 Toast ...
小程序组件库开发之抽奖游戏组件
笔者在之前写了一篇关于小程序抽奖游戏组件的文章,当时的设计比较粗糙,组件的可复用性也不是很好,这里笔者新开发了一个抽奖小游戏组件,表现形式上和可复用性上都相对之前有了不小的提升. 读者朋友可以先看一下 ...
小程序组件库ColorUI的使用，一键复制粘贴
在开发uniapp的时候,最佳的ui框架就是ColorUI,ColorUI是一个Css类的UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互! 颜值很高,注重颜值的程 ...
高拍仪 js调用demo_颜值高、性能好的小程序组件库，带给你不一样的视觉体验...
介绍 ColorUI是一个高饱和度色彩,注重视觉效果的小程序组件库,可以在国内比较火的uniapp或者原生小程序中进行开发.文章中将进行各组件的截图预览,一定不会让你失望的! PS:想直接查看组件效果 ...

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

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

前情提要（可忽略）

问题及解决

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

组件三 scroll-view组件问题

组件四 Search 搜索

组件五： Cell 单元格

Tabbar 标签栏

自定义导航栏问题

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

最新文章

热门文章

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

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

前情提要（可忽略）

问题及解决

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

组件三 scroll-view组件问题

组件四 Search 搜索

组件五： Cell 单元格

Tabbar 标签栏

自定义导航栏问题

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

最新文章

热门文章

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