小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容
1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{item.checked ? item.selectedIconPath : item.iconPath}}" ></cover-image>
<cover-view >{{item.text}}</cover-view>
</cover-view>
</cover-view>
2.实际效果如下: 底部的tabbar没出来

3.把 cover-view 改成 view 把 cover-image 改成 image 标签
<view class="tab-bar">
<view class="tab-bar-border"></view>
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<image src="{{item.checked ? item.selectedIconPath : item.iconPath}}" ></image>
<view >{{item.text}}</view>
</view>
</view>
4. 记得把你的css 样式也改一下啊 默认的 class 有cover-view cover-image
5.现在的效果如下


小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容的更多相关文章
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序 自定义tabbar实例
在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...
- 微信小程序自定义tabbar的问题
个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...
- 微信小程序自定义TabBar
项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...
- 小程序自定义tabBar,动态控制tabBar
最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单.当时我就有点小懵逼了,这个不是小程序自带的组件么?还要做成动态?这就有点尴尬了..... 不过也只是一时尴尬而 ...
- 小程序自定义tabbar
代码片段: wechatide://minicode/IUoCyemJ7D3d GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/ma ...
- 微信小程序 - 自定义tabbar
更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...
- 微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...
随机推荐
- pytest文档30-功能用例与自动化用例完美对接(allure)
前言 做自动化做久了,经常会思考一个问题,到底别人是怎么做的自动化,跟自己的有啥不一样,看过不少书和资料,都是停留在demo的层面. 真正把自动化做的好的大牛又不屑于分享自己的劳动成果,所以大部分情况 ...
- linux (08) nginx入门详解
一. nginx 入门 nginx 入门学习 web服务器软件 windows IIS服务器 linux nginx apache 收费lighthttp 公司的技术栈 收费版技术栈 apache ...
- 429 too many requests错误出现在wordpress后台更新及官网的5种解决方法
从今年10月份开始wordpress服务经常出现429 too many requests错误,包括后台更新和访问wp官网,如下图所示,这是为什么呢?怎么处理呢?有大佬向官方论坛提问了,论坛主持人Ja ...
- 6.Vue的Axios异步通信
1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests ...
- java 随笔
Spring的scope="prototype"属性 - 多例 spring 默认scope 是单例模式(singleton),这样只会创建一个Action对象,每次访问都是同一个 ...
- [LeetCode] 6. ZigZag Conversion 之字型转换字符串
The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...
- monkey-api-encrypt 1.1.2版本发布啦
时隔10多天,monkey-api-encrypt发布了第二个版本,还是要感谢一些正在使用的朋友们,提出了一些问题. GitHub主页:https://github.com/yinjihuan/mon ...
- find square root
public class Solution { public static void main(String[] args) { Scanner ip = new Scanner(System.in) ...
- 多线程避免使用SimpleDateFormat及替代方案
先来看一个多线程下使用例子,看到运行结果会出现异常: import java.text.DateFormat; import java.text.SimpleDateFormat; import ja ...
- k8s本地部署
k8s是什么 Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. Kubernetes 具有如下特点: 便携性: 无论公有云.私有云.混合 ...