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不兼容的更多相关文章

  1. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  2. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  3. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  4. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  5. 微信小程序自定义TabBar

    项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...

  6. 小程序自定义tabBar,动态控制tabBar

    最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单.当时我就有点小懵逼了,这个不是小程序自带的组件么?还要做成动态?这就有点尴尬了..... 不过也只是一时尴尬而 ...

  7. 小程序自定义tabbar

    代码片段: wechatide://minicode/IUoCyemJ7D3d GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/ma ...

  8. 微信小程序 - 自定义tabbar

    更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...

  9. 微信小程序 - 自定义tabbar(组件)

    配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...

随机推荐

  1. IOI 2020 集训队作业胡扯

    首先安慰自己:做的没集训队快很正常-- 很正常-- 做不完也很正常-- 很正常-- 全都不会做也很正常-- 很正常-- 表格 试题一 完成情况 试题二 完成情况 试题三 完成情况 cf549E cf6 ...

  2. 201871010136-赵艳强《面向对象程序设计(java)》第十二周学习总结

    201871010136-赵艳强<面向对象程序设计(java)>第十二周学习总结   项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh ...

  3. windows 上jenkins slave 执行脚本提示成功,但是没有运行

    控制台结果,但是脚本没有运行Started by user admin Building remotely on test_1110 in workspace D:\jenkins\workspace ...

  4. 莫烦TensorFlow_04 placeholder

    import tensorflow as tf input1 = tf.placeholder(tf.float32) input2 = tf.placeholder(tf.float32) outp ...

  5. springboot shiro 基本整合

    springboot shiro 基本整合 https://www.w3cschool.cn/shiro/c52r1iff.html http://shiro.apache.org/configura ...

  6. C++——二维vector初始化大小方法

    初始化二维vector,为r*c的vector,所有值为0.1.直接用初始化方法(刚开始没想到) vector<vector<int> > newOne(r, vector&l ...

  7. [LeetCode] 221. Maximal Square 最大正方形

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  8. Codeforces 652F 解题报告

    题意 有n只蚂蚁在长度为m个格子的环上,环上的格子以逆时针编号,每只蚂蚁每秒往它面向的方向移动一格.如果有两只蚂蚁相撞则相互调换方向,问t秒后每只蚂蚁的位置. 题解 首先通过观察可以发现 蚂蚁相撞产生 ...

  9. ES6模版字符串

    传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b>' + basket ...

  10. 第31课 std::atomic原子变量

    一. std::atomic_flag和std::atomic (一)std::atomic_flag 1. std::atomic_flag是一个bool类型的原子变量,它有两个状态set和clea ...