小程序自定义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 ...
随机推荐
- C++随机马赛克图程序
效果: 或者灰度,cell大小可调 代码: #include <opencv2\opencv.hpp> #include <Windows.h> struct paramete ...
- 【Spring AOP】AOP的实现(三)
一.Spring 对AOP的支持 Spring中AOP代理由Spring的IOC容器负责生成.管理,其依赖关系也由IOC容器负责管理.因此,AOP代理可以直接使用容器中的其它bean实例作为目标,这种 ...
- 接口规范、容错处理规则、aph备份数据规则
前话:前后解耦,前端开发环节使用APH,后台开发环节postman(可考虑为后台也做一个aph后台版) 1.api标准:标识符(ret:1为正常数据,0为接口报错),数据体(data:api的数据容器 ...
- CF1234A Equalize Prices
洛谷 CF1234A Equalize Prices Again 洛谷传送门 题目描述 You are both a shop keeper and a shop assistant at a sma ...
- vue系列---Vue组件化的实现原理(八)
_ 阅读目录 一. 什么是Vue组件? 如何注册组件? 1.1 全局注册组件 1.2 局部注册组件 二:组件之间数据如何传递的呢? 1) props 2) $emit 3) 使用$ref实现通信 4) ...
- 树莓派安装opencv3及其扩展库
https://www.cnblogs.com/Pyrokine/p/8921285.html 目标编译针对python的opencv以及扩展库 环境树莓派4和3B+都可以python3.7.3 py ...
- generator(生成器)
什么是generator函数: 在js中,一个函数一旦执行,就会运行到最后或者遇到return时结束,运行期间不会有其它代码能打断它,也不能从外部再传入值到函数体内. generator函数的出现就可 ...
- Spring 中的异常处理
工作中遇到这样的同事,问他活干完吗,他说开发好了,结果测试时发现各种异常情况未处理,联调测试时各种未知错误,最后联调完成比他预期的两倍工作量还多.这样的开发如果是新人还可以原谅,如果有工作经验且出现多 ...
- 洛谷 P4053 [JSOI2007]建筑抢修
传送门 思路 首先题意比较容易明白: n个建筑需要修复,只能同时修一个建筑,每个建筑修复需要t1时间,且必须在t2时间前修完,否则此建筑报废 问最多能修好多少个建筑 如果一个建筑在规定时间内没有修好的 ...
- B1042 字符统计 (20 分)
#include<cstdio> #include<iostream> #include<algorithm> #include<string> usi ...